* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background:
        radial-gradient(circle at 15% 10%, rgba(0,210,255,.18) 0 2px, transparent 3px),
        radial-gradient(circle at 80% 30%, rgba(170,255,0,.16) 0 2px, transparent 3px),
        linear-gradient(#e9f2f6, #cbd9df);
    background-size: 34px 34px, 41px 41px, auto;
    color: #283038;
    font-family: Arial, Helvetica, sans-serif;
}

.site {
    width: min(960px, calc(100% - 24px));
    margin: 22px auto;
    background: #f7fafb;
    border: 1px solid #a9b9c2;
    border-radius: 16px;
    box-shadow: 0 5px 0 #8e9ca4, 0 12px 30px rgba(0,0,0,.18);
    overflow: hidden;
    position: relative;
}

.top {
    min-height: 150px;
    padding: 25px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background:
        radial-gradient(circle at 8% 70%, #b8ff00 0 30px, transparent 31px),
        radial-gradient(circle at 18% 20%, #9e00ff 0 42px, transparent 43px),
        radial-gradient(circle at 35% 90%, #00bce8 0 38px, transparent 39px),
        linear-gradient(135deg, #24292e 0%, #111417 65%, #252c31 100%);
    color: white;
    border-bottom: 5px solid #a9ff00;
}

.brand { position: relative; }
.brand-ink { color: #b8ff00; letter-spacing: 5px; font-size: 13px; }
.brand-name {
    font-size: clamp(38px, 7vw, 66px);
    line-height: .83;
    font-weight: 900;
    letter-spacing: -4px;
    text-shadow: 4px 4px 0 #050607;
    transform: skew(-5deg);
}
.brand-name span { color: #00c8ef; }
.brand-sub {
    display: inline-block;
    margin-top: 10px;
    padding: 4px 13px;
    background: #ff62bc;
    color: #181b1d;
    font-weight: 900;
    letter-spacing: 4px;
    transform: rotate(-2deg);
}

.wiiu-badge {
    width: 125px;
    padding: 15px 10px;
    text-align: center;
    border-radius: 13px;
    background: linear-gradient(#fff, #dce5e9);
    color: #56636b;
    border: 2px solid #aab8bf;
    box-shadow: inset 0 2px 0 white;
}
.wiiu-badge b { font-size: 30px; }
.wiiu-badge small {
    display: block;
    color: #00a8d0;
    font-weight: bold;
    letter-spacing: 2px;
}

.nav {
    display: flex;
    gap: 7px;
    padding: 10px;
    background: #dce5e9;
    border-bottom: 1px solid #b5c2c8;
}
.nav a {
    flex: 1;
    text-align: center;
    padding: 11px 6px;
    color: #344149;
    text-decoration: none;
    font-weight: 900;
    font-size: 14px;
    border: 1px solid #b2c0c7;
    border-radius: 9px;
    background: linear-gradient(#fff, #e7eef1);
    box-shadow: 0 2px 0 #b0bcc2;
}
.nav a:hover, .nav a.active {
    color: white;
    background: linear-gradient(#22d2f2, #009ac2);
    border-color: #007e9e;
    text-shadow: 1px 1px #00627c;
}

.ticker {
    display: flex;
    align-items: center;
    background: #22282d;
    color: white;
    font-size: 13px;
    font-weight: bold;
}
.ticker span {
    padding: 8px 12px;
    background: #a8f500;
    color: #172000;
    white-space: nowrap;
}
.ticker marquee { padding: 8px; }

.columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 285px;
    gap: 15px;
    padding: 15px;
}

.panel {
    background: white;
    border: 1px solid #bdcbd1;
    border-radius: 13px;
    margin-bottom: 15px;
    overflow: hidden;
    box-shadow: 0 3px 0 #d2dde1, inset 0 1px 0 white;
}

.panel-title {
    padding: 10px 14px;
    color: white;
    font-size: 18px;
    font-weight: 900;
    text-shadow: 1px 1px rgba(0,0,0,.35);
}
.panel-title.cyan { background: linear-gradient(#25cce9, #009ec5); }
.panel-title.orange { background: linear-gradient(#ff9c18, #ee6510); }
.panel-title.lime { background: linear-gradient(#b9ef00, #71bb00); }
.panel-title.purple { background: linear-gradient(#bd54ee, #8b24b8); }

.welcome-inner {
    min-height: 205px;
    padding: 22px;
    display: grid;
    grid-template-columns: 1.3fr .7fr;
    align-items: center;
    position: relative;
    overflow: hidden;
}
.welcome-inner:before, .welcome-inner:after {
    content: "";
    position: absolute;
    border-radius: 50%;
    z-index: 0;
}
.welcome-inner:before {
    width: 180px; height: 180px;
    right: 55px; top: -55px;
    background: #b7f900;
}
.welcome-inner:after {
    width: 110px; height: 110px;
    right: -20px; bottom: -35px;
    background: #a000d8;
}
.welcome-inner > * { position: relative; z-index: 1; }
h1 { margin: 0 0 10px; font-size: clamp(27px, 4vw, 42px); line-height: .95; }
h1 span { color: #72c900; }
.welcome p { max-width: 520px; line-height: 1.5; font-size: 15px; }

.ink-stamp {
    display: inline-block;
    margin-top: 5px;
    padding: 9px 18px;
    background: #ff72c3;
    color: #1b1d20;
    font-weight: 900;
    font-size: 21px;
    line-height: .9;
    transform: rotate(-3deg);
    box-shadow: 4px 4px 0 #222;
}
.ink-stamp small { font-size: 10px; letter-spacing: 2px; }

.squid-art { width: 170px; height: 170px; margin: auto; position: relative; }
.squid-head {
    position: absolute; left: 25px; top: 22px;
    width: 120px; height: 105px;
    background: #00b9df;
    border-radius: 60% 60% 45% 45%;
    transform: rotate(-8deg);
    box-shadow: 8px 9px 0 rgba(0,0,0,.13);
}
.eye {
    position: absolute; top: 56px; width: 20px; height: 25px;
    background: white; border-radius: 50%;
}
.eye:after {
    content: ""; position: absolute; width: 9px; height: 12px;
    background: #222; border-radius: 50%; top: 7px;
}
.e1 { left: 62px; transform: rotate(8deg); }
.e2 { left: 91px; transform: rotate(-8deg); }
.e1:after { left: 6px; }
.e2:after { left: 4px; }
.tentacle {
    position: absolute; top: 112px; width: 28px; height: 58px;
    background: #00b9df; border-radius: 0 0 25px 25px;
}
.t1 { left: 38px; transform: rotate(12deg); }
.t2 { left: 74px; }
.t3 { left: 108px; transform: rotate(-12deg); }

.gamepad-panel { background: #dfe7ea; padding: 16px; }
.gamepad {
    position: relative;
    min-height: 430px;
    padding: 45px 105px;
    border-radius: 65px;
    background: linear-gradient(150deg, #fff, #dce4e8);
    border: 2px solid #a9b6bd;
    box-shadow: inset 0 3px 0 white, 0 7px 0 #9ca9af;
}
.camera {
    position: absolute; left: 50%; top: 12px; transform: translateX(-50%);
    width: 108px; height: 20px; border-radius: 15px; background: #262b2e;
}
.camera:after {
    content: ""; position: absolute; width: 7px; height: 7px; border-radius: 50%;
    background: #70a7bd; left: 50%; top: 6px; transform: translateX(-50%);
}
.screen-shell {
    padding: 9px;
    background: #aeb9bd;
    border-radius: 13px;
    box-shadow: inset 0 2px 4px #6f7a7e;
}
.screen {
    height: 270px;
    position: relative;
    overflow: hidden;
    padding: 22px 15px;
    border: 4px solid #202427;
    border-radius: 7px;
    background:
        radial-gradient(circle at 18% 15%, #b8ff00 0 35px, transparent 36px),
        radial-gradient(circle at 92% 80%, #a900df 0 52px, transparent 53px),
        linear-gradient(135deg, #22282b, #090b0d);
    color: white;
}
.screen-ink { position: absolute; border-radius: 50%; opacity: .85; }
.screen-ink.a { width: 65px; height: 65px; background:#00d1ef; left:-18px; bottom:20px; }
.screen-ink.b { width: 40px; height: 40px; background:#ff68bd; right:80px; top:-12px; }
.screen-top { text-align: center; position: relative; z-index: 2; }
.screen-top span { display:block; font-size:10px; letter-spacing:2px; color:#a8f900; }
.screen-top strong { display:block; font-size:34px; margin-top:3px; }

.countdown {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin: 20px auto 13px;
    max-width: 540px;
    position: relative;
    z-index: 2;
}
.countdown div {
    padding: 8px 3px 6px;
    border: 2px solid #69747a;
    border-radius: 7px;
    background: #111517;
    text-align: center;
    box-shadow: inset 0 1px 0 #9da5a8;
}
.countdown b {
    display:block;
    font-family: "Courier New", monospace;
    font-size: clamp(20px, 4vw, 35px);
    line-height: 1;
}
.countdown small {
    display:block;
    margin-top:5px;
    color:#a8f900;
    font-size:9px;
    font-weight:bold;
}
.status {
    position: relative; z-index:2;
    text-align:center;
    font-size:12px;
    font-weight:bold;
    color:#ddd;
}

.stick {
    position:absolute; width:52px; height:52px; border-radius:50%;
    background: radial-gradient(circle, #e9eef0 0 55%, #aebbc1 57% 100%);
    border: 2px solid #99a7ad;
    box-shadow: inset 0 2px 4px white;
}
.left-stick { left: 27px; top: 150px; }
.right-stick { right: 27px; top: 145px; }

.dpad { position:absolute; left:35px; bottom:78px; width:70px; height:70px; }
.dpad i { position:absolute; background:#aeb9bd; border:2px solid #8d9ba1; border-radius:4px; }
.dpad i:nth-child(1) { width:24px; height:70px; left:23px; }
.dpad i:nth-child(2) { width:70px; height:24px; top:23px; }
.dpad i:nth-child(3) { display:none; }
.dpad i:nth-child(4) { display:none; }

.buttons { position:absolute; right:31px; bottom:82px; width:72px; height:72px; }
.buttons i {
    position:absolute; width:23px; height:23px; border-radius:50%;
    background:#aeb9bd; border:2px solid #89979d; text-align:center;
    line-height:19px; font-size:11px; font-weight:bold; font-style:normal;
}
.buttons i:nth-child(1) { left:24px; top:0; }
.buttons i:nth-child(2) { left:0; top:24px; }
.buttons i:nth-child(3) { right:0; top:24px; }
.buttons i:nth-child(4) { left:24px; bottom:0; }

.home-button, .select, .start {
    position:absolute; bottom:23px; text-align:center; color:#7b888e;
}
.home-button { left:50%; transform:translateX(-50%); width:30px; height:30px; border:2px solid #a1adb2; border-radius:50%; line-height:26px; }
.select { left:43%; }
.start { right:43%; }
.u-mark { position:absolute; left:31px; bottom:27px; color:#8a969b; font-size:20px; }
.u-mark b { color:#00a5ce; }

.reset-note {
    margin-top: 12px;
    padding: 11px;
    border: 1px solid #9fcf00;
    border-radius: 9px;
    background: #f9fff0;
    font-size: 13px;
    text-align: center;
}
.reset-note span { font-size: 20px; color:#70b900; margin-right:7px; }

.news-row {
    display:grid; grid-template-columns:70px 1fr 20px; gap:8px;
    padding: 12px 14px; border-bottom:1px dotted #b9c5ca; font-size:13px;
}
.news-row:last-child { border-bottom:0; }
.news-row b { color:#009ec5; }
.news-row em { font-size:20px; color:#9aa6ac; }

.mini { margin-bottom:15px; }
.alert {
    margin:12px; padding:13px; border-radius:9px;
    background:
        radial-gradient(circle at 95% 10%, #b8ff00 0 20px, transparent 21px),
        linear-gradient(135deg,#202529,#111315);
    color:white;
}
.alert strong {
    display:inline-block; padding:4px 7px; background:#ff42b0; color:#191b1d;
    font-size:12px; transform:rotate(-2deg);
}
.alert p { line-height:1.45; }
.alert small { color:#b8ff00; font-weight:bold; }

.online { padding:12px 14px 0; color:#61b600; font-weight:900; font-size:19px; }
.online span { display:inline-block; width:12px; height:12px; border-radius:50%; background:#6ee000; margin-right:5px; box-shadow:0 0 0 3px #dff5ca; }
.mini > p { margin:10px 14px 5px; font-size:12px; }
.counter {
    margin: 0 14px 10px; padding:8px; border-radius:8px;
    background:#30373c; color:white; font:bold 22px "Courier New", monospace;
    text-align:center; letter-spacing:3px;
}
.mini hr { border:0; border-top:1px dotted #b8c5ca; margin:10px 14px; }

.post { display:flex; gap:9px; padding:11px 12px; border-bottom:1px solid #e0e7ea; }
.post:last-child { border-bottom:0; }
.avatar {
    width:36px; height:36px; border-radius:50%; flex:none;
    background:#a6ed00; color:#fff; text-align:center; line-height:36px;
}
.lime-dot { background:#00b8df; }
.post p { margin:3px 0; font-size:13px; }
.post small { color:#89969c; }

.quick {
    display:block; margin:8px 12px; padding:9px 10px; border-radius:7px;
    background:#edf4f6; border:1px solid #c4d0d5; color:#087d9e;
    text-decoration:none; font-weight:bold; font-size:13px;
}
.quick:hover { background:#d9f8ff; }

footer {
    text-align:center; padding:20px;
    background:#252b30; color:#dbe3e6; font-size:12px;
    border-top:5px solid #a8f900;
}
.footer-ink { color:#00c4e7; letter-spacing:8px; margin-bottom:7px; }
footer small { color:#89979e; }

.ink { position:fixed; z-index:-1; border-radius:50%; opacity:.6; }
.ink-lime { width:90px; height:90px; background:#a8f900; left:-25px; bottom:70px; }
.ink-purple { width:75px; height:75px; background:#a600d7; right:-20px; top:160px; }
.ink-cyan { width:45px; height:45px; background:#00bde5; left:8%; top:35%; }

@media (max-width: 760px) {
    .columns { grid-template-columns: 1fr; }
    .nav { flex-wrap:wrap; }
    .nav a { flex-basis:30%; }
    .top { min-height:125px; padding:20px; }
    .wiiu-badge { width:95px; }
    .wiiu-badge b { font-size:23px; }
    .gamepad { padding:45px 60px; border-radius:45px; }
    .dpad { left:18px; }
    .buttons { right:18px; }
    .left-stick { left:13px; }
    .right-stick { right:13px; }
    .welcome-inner { grid-template-columns:1fr .5fr; }
}

@media (max-width: 520px) {
    .site { width:100%; margin:0; border-radius:0; }
    .brand-name { font-size:40px; }
    .wiiu-badge { display:none; }
    .ticker span { display:none; }
    .columns { padding:8px; }
    .gamepad { padding:40px 13px 45px; border-radius:35px; min-height:390px; }
    .screen { height:250px; }
    .dpad, .buttons, .stick { transform:scale(.75); transform-origin:center; }
    .left-stick { left:-2px; }
    .right-stick { right:-2px; }
    .dpad { left:3px; }
    .buttons { right:3px; }
    .u-mark { display:none; }
    .welcome-inner { grid-template-columns:1fr; }
    .squid-art { position:absolute; opacity:.32; right:-20px; }
}