/* Shroombrew website. Visual language follows the Wii Shop Channel: white pages,
   pale blue edges, cyan headings, dotted rules, soft round buttons.
   The Wii font file is served by the shop itself; system fonts cover every
   language the font lacks glyphs for. */
@font-face{font-family:"WiiShop";src:url('https://shroombrew.3-72-19-139.sslip.io/archive-shop/assets/font2.ttf')}

:root{--cyan:#34beed;--cyan-d:#1d9fd0;--ink:#323232;--mute:#7a8a92;--pale:#e8f7fd;--edge:#cdeefa;--ok:#1b8a3a;--bad:#c0392b}
*{box-sizing:border-box}
html{background:#fff}
body{margin:0;color:var(--ink);font-family:"WiiShop","Segoe UI","Hiragino Sans","Noto Sans CJK SC","Noto Sans CJK JP","Noto Sans CJK KR","Malgun Gothic","Microsoft YaHei",system-ui,sans-serif;font-size:18px;line-height:1.5;
  background:linear-gradient(90deg,var(--edge) 0,#fff 70px,#fff calc(100% - 70px),var(--edge) 100%);min-height:100vh}
.wrap{max-width:900px;margin:0 auto;padding:0 28px 60px}
header.top{padding-top:22px;position:relative}
h1{margin:0;color:var(--cyan);font-weight:normal;font-size:38px;line-height:1.2}
h2{color:var(--cyan);font-weight:normal;font-size:26px;margin:0 0 8px}
.rule{height:6px;margin:12px 0 18px;background:radial-gradient(circle,#9aa 1px,transparent 1.6px) 0 50%/8px 6px repeat-x}
a{color:var(--cyan-d)}

nav{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 4px}
nav a,nav span.cur{display:inline-block;padding:5px 16px;border-radius:999px;border:2px solid var(--cyan);color:var(--cyan-d);background:#fff;text-decoration:none;font-size:16px;box-shadow:0 2px 5px rgba(52,190,237,.25)}
nav a:hover{background:var(--pale)}
nav span.cur{background:linear-gradient(#5fd0f6,var(--cyan));color:#fff;border-color:#fff;box-shadow:0 0 0 2px var(--cyan),0 2px 6px rgba(52,190,237,.45)}
header.top nav select{position:absolute;top:30px;right:0;margin:0}
#bottomrule{margin-top:26px}

.box{background:#fff;border:2px solid var(--edge);border-radius:14px;padding:16px 20px;margin:0 0 18px;box-shadow:0 2px 8px rgba(52,190,237,.12)}
.box>p:first-child{margin-top:0}.box>p:last-child{margin-bottom:0}
.muted{color:var(--mute);font-size:15px}.ok{color:var(--ok)}.bad{color:var(--bad)}
.hero{text-align:center;padding:10px 0 6px}
.hero p{font-size:22px;margin:6px 0 16px}

input,select,textarea{font:inherit;color:var(--ink);padding:7px 12px;border:2px solid var(--edge);border-radius:10px;background:#fff;max-width:100%}
input:focus,select:focus{outline:0;border-color:var(--cyan)}
button,.btn{font:inherit;display:inline-block;cursor:pointer;text-decoration:none;color:var(--cyan-d);background:#fff;border:2px solid var(--cyan);border-radius:999px;padding:6px 22px;box-shadow:0 2px 5px rgba(52,190,237,.3)}
button:hover,.btn:hover{background:var(--pale)}
button.main,.btn.main{color:#fff;background:linear-gradient(#5fd0f6,var(--cyan));border-color:#fff;box-shadow:0 0 0 2px var(--cyan),0 3px 8px rgba(52,190,237,.45)}
button.main:hover{filter:brightness(1.06)}
button[disabled]{opacity:.55;cursor:not-allowed;filter:grayscale(.3)}
button.sm{padding:2px 14px;font-size:15px}

table{border-collapse:collapse;width:100%;font-size:16px}
th,td{padding:6px 10px;text-align:left;border-bottom:2px dotted #c4d2d8}
th{color:var(--cyan-d);font-weight:normal;cursor:pointer;white-space:nowrap}

#msg{display:none}#msg.ok,#msg.bad{display:block;font-weight:bold}

/* the points card */
.card{position:relative;max-width:460px;margin:12px auto 6px;padding:18px 22px 20px;border-radius:18px;color:#fff;
  background:linear-gradient(135deg,#5fd0f6 0,var(--cyan) 55%,#2aa8dc 100%);box-shadow:0 0 0 3px #fff,0 0 0 5px var(--cyan),0 8px 18px rgba(52,190,237,.4)}
.card small{display:block;opacity:.92;letter-spacing:1px;text-transform:uppercase;font-size:13px}
.card .num{font-size:27px;letter-spacing:2px;margin:10px 0 2px;font-variant-numeric:tabular-nums;white-space:nowrap}
.card .pts{position:absolute;right:20px;top:14px;font-size:28px;text-shadow:0 1px 2px rgba(0,0,0,.2)}
.card .row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.card button{padding:4px 16px;font-size:15px}
.cardlist .card{margin-left:0}
.timer{font-size:20px;color:var(--cyan-d)}
.big{font-size:32px;letter-spacing:2px;color:var(--cyan-d)}
@media(max-width:560px){.wrap{padding:0 14px 40px}h1{font-size:30px}.card{padding:16px 14px 18px}.card .num{font-size:20px;letter-spacing:1px}}