:root{
  --bg:#2b1a10;
  --wood-dark:#6b4226;
  --wood:#8a5a34;
  --wood-light:#a9713f;
  --rim:#3a2416;
  --pit:#17100a;
  --fur:#8d6346;
  --fur-dark:#6e4c33;
  --cream:#f3e6cf;
  --accent:#e2b13c;
  --danger:#c0392b;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%;background:var(--bg);overscroll-behavior:none}
body{font-family:'Yusei Magic',sans-serif;color:var(--cream);touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
button,input{font:inherit;color:inherit}

#world{position:absolute;inset:0;background:var(--bg);overflow:hidden}
.screen{position:absolute;inset:0;display:none}
.screen.on{display:block}
.num,.logo,.plank,.code,h2{font-family:'Dela Gothic One','Yusei Magic',sans-serif;font-weight:400}

/* 板のボタン */
.plank{background:var(--wood-light);color:var(--bg);border:0;border-bottom:6px solid var(--wood-dark);padding:14px 26px 10px;font-size:26px;cursor:pointer;border-radius:4px;letter-spacing:1px}
.plank.big{background:var(--accent);border-bottom-color:#9a7420;font-size:34px;padding:18px 34px 12px}
.plank.ghosty{background:transparent;color:var(--cream);border:3px solid var(--wood-light);border-bottom-width:6px}
.plank:active{transform:translateY(4px);border-bottom-width:2px}
.plank:disabled{opacity:.4;cursor:default}
.plank:focus-visible,.seg button:focus-visible{outline:4px solid var(--cream);outline-offset:3px}

/* 共有ボタンは板の小型版 */
.shell-share{gap:10px}
.shell-share button{font-family:'Dela Gothic One',sans-serif;font-size:20px;padding:8px 16px 6px;border:0;border-bottom:4px solid var(--wood-dark);border-radius:4px;background:var(--wood-light);color:var(--bg)}
.shell-share button:active{transform:translateY(3px);border-bottom-width:1px}
.shell-share .shell-done{font-size:18px;opacity:.85}

/* ---------- 穴・もぐら・爆弾 ---------- */
.cell{position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer;touch-action:none}
.hole{position:relative;width:150px;height:150px;border-radius:50%;overflow:hidden;
  background:radial-gradient(circle at 50% 42%,var(--pit) 0 46%,var(--rim) 46% 60%,#5c3a22 60% 100%)}
.hole::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 10px 16px rgba(0,0,0,.6);pointer-events:none}
.pop{position:absolute;left:50%;bottom:-70%;width:68%;height:68%;transform:translate(-50%,0);transition:bottom .08s cubic-bezier(.2,.8,.3,1.25)}
.cell.up .pop{bottom:8%}
.cell.hit .pop{bottom:-30%;transition:bottom .1s ease-in}
.cell.hit .mole{transform:scale(1.15,.75)}
.cell.hit .mole::before,.cell.hit .mole::after{height:3%;top:33%}
.mole,.bomb{display:none;width:100%;height:100%;position:relative}
.cell.m .mole,.cell.b .bomb{display:block}
.mole{border-radius:50% 50% 46% 46%;background:radial-gradient(circle at 38% 32%,var(--fur) 0 55%,var(--fur-dark) 55% 100%);transition:transform .08s}
.mole::before,.mole::after{content:"";position:absolute;top:28%;width:12%;height:12%;border-radius:50%;background:#1a1a1a}
.mole::before{left:28%}
.mole::after{left:60%}
.mole i{position:absolute;left:50%;top:46%;width:16%;height:12%;background:#d87f82;border-radius:50%;transform:translateX(-50%)}
.bomb{border-radius:50%;background:radial-gradient(circle at 38% 32%,#4a4a4a 0 45%,#2b2b2b 45% 100%)}
.bomb i:first-child{position:absolute;left:50%;top:-10%;width:7%;height:24%;background:var(--wood-light);transform:translateX(-50%) rotate(15deg);border-radius:3px}
.bomb i:last-child{position:absolute;left:60%;top:-20%;width:24%;height:24%;background:var(--accent);border-radius:50%;box-shadow:0 0 10px var(--accent);animation:spark .18s steps(2) infinite}
@keyframes spark{50%{transform:scale(.6)}}
.cell.boom .hole{animation:boomHole .45s ease-out}
.cell.boom .pop{bottom:-60%;transition:bottom .15s ease-in}
.float small{font-size:18px}
.count span{display:inline-block}
@keyframes boomHole{0%{filter:brightness(4) saturate(0)}100%{filter:none}}
.cell .key{position:absolute;right:calc(50% - 82px);bottom:calc(50% - 82px);font:20px 'Dela Gothic One',sans-serif;color:var(--wood-dark);background:var(--cream);width:30px;height:30px;line-height:31px;text-align:center;border-radius:3px;opacity:.75;pointer-events:none}
.touch .cell .key{display:none}
.fx{position:absolute;inset:0;pointer-events:none}

/* 木づち */
.mallet{position:absolute;left:50%;top:50%;width:0;height:0;animation:swing .2s ease-out forwards}
.mallet::before{content:"";position:absolute;left:30px;top:-6px;width:16px;height:96px;background:#d9b27a;border-radius:3px}
.mallet::after{content:"";position:absolute;left:6px;top:-40px;width:64px;height:42px;background:var(--wood-light);border:4px solid var(--wood-dark);border-radius:6px}
@keyframes swing{0%{transform:rotate(-55deg) translate(10px,-30px);opacity:1}45%{transform:rotate(8deg) translate(-6px,-4px);opacity:1}100%{transform:rotate(-12deg) translate(-6px,-14px);opacity:0}}

.float{position:absolute;left:50%;top:6px;transform:translateX(-50%);font:30px 'Dela Gothic One',sans-serif;color:var(--accent);text-shadow:0 3px 0 var(--bg);white-space:nowrap;animation:floatUp .7s ease-out forwards}
.float.minus{color:#ff6b57;font-size:40px}
@keyframes floatUp{0%{opacity:1;transform:translate(-50%,10px) scale(1.3)}100%{opacity:0;transform:translate(-50%,-56px) scale(1)}}
.ring{position:absolute;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;border:14px solid var(--accent);animation:ring .5s ease-out forwards}
@keyframes ring{0%{transform:scale(.4);opacity:1}100%{transform:scale(1.8);opacity:0}}

/* ほかの人の手 */
.chip{position:absolute;top:2px;width:40px;height:40px;border-radius:50%;border:3px solid var(--bg);color:var(--bg);font:20px/34px 'Dela Gothic One',sans-serif;text-align:center;animation:chip .9s ease-out forwards}
.chip.bad{border-color:var(--danger);box-shadow:0 0 0 4px var(--danger)}
@keyframes chip{0%{transform:translateY(20px) scale(.3);opacity:0}15%{transform:translateY(0) scale(1.15);opacity:1}70%{opacity:1}100%{transform:translateY(-30px);opacity:0}}
.crowd{position:absolute;right:calc(50% - 90px);top:-4px;font:28px 'Dela Gothic One',sans-serif;color:var(--bg);background:var(--cream);padding:4px 8px 0;border-radius:3px;transform:rotate(8deg);animation:crowd .9s ease-out forwards}
@keyframes crowd{0%{transform:rotate(8deg) scale(1.6)}20%{transform:rotate(8deg) scale(1)}80%{opacity:1}100%{opacity:0}}

/* ---------- タイトル ---------- */
#sTitle .logo{position:absolute;margin:0;font-size:84px;line-height:1.05;letter-spacing:4px;color:var(--cream);text-shadow:0 6px 0 var(--wood-dark)}
#sTitle .logo span{color:var(--accent);font-size:1.15em}
#sTitle .tmole{position:absolute;display:flex;flex-direction:column;align-items:center;gap:12px}
#sTitle .tmole .hole{width:250px;height:250px}
#sTitle .tmole .cell .pop{transition:bottom .12s cubic-bezier(.2,.8,.3,1.25)}
.tapHint{margin:0;font-size:30px;color:var(--accent);animation:blink 1.1s steps(2) infinite}
@keyframes blink{50%{opacity:.35}}
.rules{position:absolute;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 22px;font-size:26px}
.rules li{display:flex;align-items:center;gap:12px}
.ic{flex:0 0 46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:18px 'Dela Gothic One',sans-serif;color:var(--bg)}
.ic.m{background:var(--fur)}
.ic.b{background:#2b2b2b;box-shadow:inset -6px -6px 0 #111}
.ic.c{background:var(--accent);border-radius:4px}
.ic.t{background:var(--cream);border-radius:4px}
.menu{position:absolute;display:flex;flex-direction:column;gap:14px}
.menu .row{display:flex;gap:14px}
.menu .row .plank{flex:1;font-size:22px;padding:12px 10px 8px}
.pcHint{position:absolute;margin:0;font-size:20px;opacity:.6}
.touch .pcHint{display:none}
.online{position:absolute;margin:0;font-size:22px;color:var(--cream);letter-spacing:1px}
.land #sTitle .online{left:560px;top:610px;width:470px}
.port #sTitle .online{left:0;right:0;top:20px;text-align:center}
#sFind .codeBig{font-size:140px}

.land #sTitle .logo{left:60px;top:60px}
.land #sTitle .tmole{left:120px;top:300px}
.land #sTitle .rules{left:560px;top:80px;width:470px}
.land #sTitle .menu{left:560px;top:330px;width:470px}
.land #sTitle .pcHint{left:560px;top:660px}
.port #sTitle .logo{left:0;right:0;top:60px;text-align:center}
.port #sTitle .tmole{left:0;right:0;top:290px}
.port #sTitle .rules{left:60px;right:60px;top:640px}
.port #sTitle .menu{left:80px;right:80px;top:780px}
.port #sTitle .pcHint{left:0;right:0;bottom:20px;text-align:center}

/* ---------- 試合 ---------- */
.board{position:absolute;display:grid;background:repeating-linear-gradient(90deg,var(--wood) 0 30px,var(--wood-light) 30px 60px);border:8px solid var(--wood-dark);border-radius:8px;box-shadow:inset 0 0 40px rgba(0,0,0,.45)}
.land .board{left:20px;top:20px;width:740px;height:680px;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,1fr)}
.port .board{left:20px;top:320px;width:680px;height:740px;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr)}
.hud{position:absolute;display:grid;gap:12px}
.land .hud{left:780px;top:20px;width:280px;height:680px;grid-template-columns:1fr 1fr;grid-template-rows:auto auto 1fr auto}
.land .hud .score{grid-column:1/3}
.land .hud .side{grid-column:1/3}
.land .hud .quit{grid-column:1/3;justify-self:start}
.port .hud{left:20px;top:20px;width:680px;height:290px;grid-template-columns:1.4fr 1fr 1fr;grid-template-rows:auto 1fr}
.port .hud .side{grid-column:1/3}
.port .hud .quit{align-self:end;justify-self:end}
.box{background:var(--wood-dark);border:4px solid var(--rim);padding:8px 12px 4px;text-align:center;position:relative}
.box .lb{display:block;font-size:18px;opacity:.8}
.box .num{display:block;font-size:46px;line-height:1.15}
.box.score .num{color:var(--accent);font-size:50px;white-space:nowrap}
.box.time{background:var(--rim);border-color:var(--wood-dark)}
.box.time.low .num{color:#ff6b57}
.box.combo em{position:absolute;right:6px;top:4px;font:22px 'Dela Gothic One',sans-serif;font-style:normal;color:var(--bg);background:var(--accent);padding:2px 6px 0;border-radius:3px}
.box.combo em.x1{background:var(--cream);opacity:.5}
.box.combo.bump{animation:bump .25s ease-out}
@keyframes bump{0%{transform:scale(1.12)}100%{transform:scale(1)}}
.side{overflow:hidden}
.ghost{font-size:22px;line-height:1.5;background:transparent;border:3px dashed var(--wood-light);padding:10px 14px}
.ghost b{font-family:'Dela Gothic One',sans-serif;font-weight:400;font-size:30px}
.ghost .up{color:var(--accent)}
.ghost .down{color:#ff6b57}
.players{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:22px}
.port .players{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;font-size:20px}
.players li{display:flex;align-items:center;gap:8px;padding:2px 6px}
.players li.me{background:rgba(243,230,207,.12)}
.players .dot{flex:0 0 26px;height:26px;border-radius:50%;color:var(--bg);font:14px/26px 'Dela Gothic One',sans-serif;text-align:center}
.players .nm{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.players .sc{font-family:'Dela Gothic One',sans-serif}
.quit{background:none;border:2px solid var(--wood-light);padding:6px 14px;font-size:18px;cursor:pointer;opacity:.7;border-radius:3px}
.count{position:absolute;display:flex;align-items:center;justify-content:center;pointer-events:none;font:200px 'Dela Gothic One',sans-serif;color:var(--cream);text-shadow:0 10px 0 var(--bg)}
.land .count{left:20px;top:20px;width:740px;height:680px}
.port .count{left:20px;top:320px;width:680px;height:740px}
.count.go{color:var(--accent);font-size:150px}
.count .pulse{animation:pulse .8s ease-out}
@keyframes pulse{0%{transform:scale(1.6);opacity:0}25%{transform:scale(1);opacity:1}100%{opacity:.6}}
.banner{position:absolute;left:0;right:0;text-align:center;pointer-events:none;font:56px 'Dela Gothic One',sans-serif;color:var(--bg);opacity:0}
.land .banner{top:300px;width:780px}
.port .banner{top:620px}
.banner span{background:var(--accent);padding:14px 28px 8px;border-radius:4px;box-shadow:0 8px 0 var(--bg)}
.banner.red span{background:var(--danger);color:var(--cream)}
.banner.show{animation:banner 1.1s ease-out forwards}
@keyframes banner{0%{opacity:0;transform:scale(1.5)}12%{opacity:1;transform:scale(1)}75%{opacity:1}100%{opacity:0}}
#flash{position:absolute;inset:0;pointer-events:none;background:#fff3d6;opacity:0;z-index:20}

/* ---------- 結果 ---------- */
#sResult h2{margin:0 0 10px;font-size:30px;color:var(--accent)}
.rMain,.rHi{position:absolute}
.land .rMain{left:40px;top:30px;width:430px;bottom:30px}
.land .rHi{left:500px;top:30px;right:30px;bottom:30px}
.port .rMain{left:40px;right:40px;top:24px;height:470px}
.port .rHi{left:40px;right:40px;top:500px;bottom:24px}
.rMode{margin:0;font-size:24px;opacity:.8}
.rScore{display:flex;align-items:baseline;gap:8px}
.rScore{white-space:nowrap}
.rScore b{font:400 96px/1.05 'Dela Gothic One',sans-serif;color:var(--accent)}
.rScore span{font-size:32px}
.rSub{margin:0 0 8px;font-size:24px;min-height:32px}
.rSub .new{background:var(--danger);color:var(--cream);padding:2px 10px;font-family:'Dela Gothic One',sans-serif}
.rStand{list-style:none;margin:0 0 10px;padding:0;font-size:22px;max-height:230px;overflow:hidden}
.port .rStand{max-height:120px;columns:2}
.rStand li{display:flex;gap:8px;align-items:center;padding:2px 0;break-inside:avoid}
.rStand li.me{color:var(--accent)}
.rStand .rk{width:34px;font-family:'Dela Gothic One',sans-serif}
.rStand .nm{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rStand .sc{font-family:'Dela Gothic One',sans-serif}
.rRank{margin:0 0 10px;font-size:22px;min-height:30px}
.rShare{margin-bottom:14px}
.rBtns{display:flex;flex-wrap:wrap;gap:12px}
.rBtns .plank{font-size:22px;padding:12px 18px 8px}
.rBtns .plank.big{font-size:28px}
.land #sResult .rBtns{position:absolute;bottom:0;left:0;right:0}
.port #sResult .rBtns{position:absolute;bottom:0;left:0;right:0}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.card{display:flex;gap:12px;align-items:center;background:var(--wood-dark);border-left:8px solid var(--accent);padding:10px 12px;opacity:0;transform:translateX(30px)}
.card.in{opacity:1;transform:none;transition:all .25s cubic-bezier(.2,.8,.3,1.2)}
.card.bad{border-left-color:var(--danger)}
.card .scene{flex:0 0 96px;height:96px;position:relative}
.card .scene .cell{width:96px;height:96px}
.card .scene .hole{width:96px;height:96px}
.card .txt{min-width:0}
.card .big{display:block;font:28px/1.1 'Dela Gothic One',sans-serif}
.card .big small{font-size:18px}
.card .sm{display:block;font-size:16px;opacity:.85;margin-top:4px}
/* リプレイの一コマ（くり返し再生） */
.scene.rf .pop{animation:rfPop 1.6s infinite}
@keyframes rfPop{0%,10%{bottom:-70%}22%,40%{bottom:8%}48%,100%{bottom:-30%}}
.scene.rf .mole{animation:rfSquash 1.6s infinite}
@keyframes rfSquash{0%,40%{transform:none}46%,90%{transform:scale(1.15,.75)}100%{transform:none}}
.scene .mallet2{position:absolute;left:50%;top:50%;animation:rfSwing 1.6s infinite;transform-origin:30px 60px}
.scene .mallet2::before{content:"";position:absolute;left:22px;top:-4px;width:11px;height:62px;background:#d9b27a}
.scene .mallet2::after{content:"";position:absolute;left:4px;top:-28px;width:44px;height:28px;background:var(--wood-light);border:3px solid var(--wood-dark);border-radius:4px}
@keyframes rfSwing{0%,28%{transform:rotate(-60deg);opacity:0}32%{opacity:1}40%{transform:rotate(6deg)}60%{transform:rotate(-10deg);opacity:1}75%,100%{opacity:0}}
.scene.rb .pop{animation:rfPop 1.6s infinite}
.scene .blast{position:absolute;left:50%;top:50%;width:96px;height:96px;margin:-48px 0 0 -48px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 10px var(--danger);animation:rbBlast 1.6s infinite;opacity:0}
@keyframes rbBlast{0%,40%{transform:scale(.2);opacity:0}44%{transform:scale(.6);opacity:1}70%{transform:scale(1.4);opacity:0}100%{opacity:0}}
.scene .meter{position:absolute;inset:8px;display:flex;align-items:flex-end;gap:5px}
.scene .meter i{flex:1;background:var(--accent);animation:meter 1.6s infinite}
@keyframes meter{0%{transform:scaleY(.1)}60%,100%{transform:scaleY(1)}}
.scene .meter i{transform-origin:bottom}
.scene .dots{position:absolute;inset:0}
.scene .dots i{position:absolute;width:30px;height:30px;border-radius:50%;border:3px solid var(--bg);animation:chipLoop 1.6s infinite}
@keyframes chipLoop{0%,20%{transform:scale(0)}35%,90%{transform:scale(1)}100%{transform:scale(0)}}
#rLine{display:block;margin-top:14px;width:100%;background:rgba(0,0,0,.25)}
.legend{display:flex;gap:18px;font-size:18px;opacity:.85;margin-top:6px}
.legend i{display:inline-block;width:22px;height:6px;vertical-align:middle;margin-right:6px}

/* ---------- 部屋・ロビー・ランキング・記録 ---------- */
.page{position:absolute;inset:0;padding:36px 50px}
.port .page{padding:40px 36px}
.page h2{margin:0 0 6px;font-size:40px;color:var(--accent)}
.lead{margin:0 0 18px;font-size:22px;line-height:1.5;opacity:.9}
.field{display:flex;align-items:center;gap:12px;font-size:24px;margin-bottom:18px}
.field .lbl{min-width:96px;opacity:.85}
.seg{display:flex;gap:6px}
.seg button{background:var(--wood-dark);border:0;padding:8px 16px 6px;font-size:22px;cursor:pointer;border-radius:3px}
.seg button.on{background:var(--accent);color:var(--bg)}
.nameShow{font:30px 'Dela Gothic One',sans-serif;min-width:170px;text-align:center;color:var(--accent)}
.roomCols{display:grid;gap:22px}
.land .roomCols{grid-template-columns:1fr 1fr}
.roomCol{background:var(--wood-dark);padding:18px 20px;border-top:6px solid var(--wood-light)}
.roomCol h3{margin:0 0 6px;font-size:28px}
.roomCol p{margin:0 0 12px;font-size:19px;opacity:.85;line-height:1.45}
.roomCol .ent{display:flex;gap:10px}
.codeIn{flex:1;min-width:0;background:var(--cream);color:var(--bg);border:0;border-bottom:5px solid var(--wood);font:34px 'Dela Gothic One',sans-serif;letter-spacing:6px;padding:8px 12px 4px;text-transform:uppercase;border-radius:3px}
.codeIn::placeholder{font:20px 'Yusei Magic',sans-serif;letter-spacing:0;color:#8a7a62;text-transform:none}
.msg{font-size:22px;min-height:32px;margin:14px 0;color:var(--accent)}
.confirm{position:absolute;inset:0;background:rgba(23,16,10,.88);display:flex;align-items:center;justify-content:center;z-index:5}
.confirm[hidden]{display:none}
.confirm .in{background:var(--wood-dark);border-top:8px solid var(--accent);padding:30px 36px;max-width:620px;text-align:center}
.confirm p{font-size:28px;line-height:1.5;margin:0 0 22px}
.confirm .rBtns{justify-content:center}
.back{position:absolute;right:50px;bottom:36px}
.port .back{right:36px;bottom:40px}

.codeBig{font:96px/1 'Dela Gothic One',sans-serif;letter-spacing:10px;color:var(--accent);margin:6px 0 14px}
.members{list-style:none;margin:16px 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px 20px;font-size:26px}
.members li{display:flex;align-items:center;gap:10px;position:relative}
.members .dot{flex:0 0 36px;height:36px;border-radius:50%;color:var(--bg);font:18px/36px 'Dela Gothic One',sans-serif;text-align:center}
.members .host{font-size:16px;background:var(--cream);color:var(--bg);padding:2px 6px 0;border-radius:3px}
.members .bubble{position:absolute;left:44px;top:-24px;background:var(--cream);color:var(--bg);font-size:18px;padding:3px 10px;border-radius:3px;animation:chip 2.2s ease-out forwards;white-space:nowrap}
.stamps{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 16px}
.stamps button{background:transparent;border:2px solid var(--wood-light);padding:6px 12px 4px;font-size:20px;cursor:pointer;border-radius:3px}
.stamps button:active{background:var(--wood-light);color:var(--bg)}
#sLobby .rBtns{position:absolute;left:50px;bottom:36px}
.port #sLobby .rBtns{left:36px;bottom:40px}
.land #sLobby .lobR{position:absolute;left:560px;top:36px;right:50px}
.port #sLobby .lobR{margin-top:10px}

/* なまえの入力・合流の入口 */
.nameIn{width:300px;max-width:52%;background:var(--cream);color:var(--bg);border:0;border-bottom:5px solid var(--wood);font:28px 'Dela Gothic One',sans-serif;padding:8px 12px 4px;border-radius:3px}
.nameIn::placeholder{font:20px 'Yusei Magic',sans-serif;color:#8a7a62}
.field .plank{font-size:20px;padding:10px 16px 6px}
.roomCol.main{border-top-color:var(--accent)}
.roomCol.main h3{color:var(--accent)}
.confirm p small{font-size:20px;opacity:.8}

/* お邪魔・部屋の設定 */
.ojama{background:var(--wood-dark);border-left:8px solid var(--accent);padding:12px 16px;margin:0 0 6px;display:flex;align-items:center;gap:14px}
.ojama[hidden]{display:none}
.ojama p{margin:0;flex:1;font-size:20px;line-height:1.4}
.ojama .plank{white-space:nowrap}
.rulesBox{border-top:3px solid var(--wood-light);padding-top:8px;max-width:470px}
.rulesBox h3{margin:0 0 6px;font-size:20px;color:var(--accent)}
.rulesBox dl{margin:0;display:grid;gap:3px}
.rulesBox dl div{display:flex;gap:10px;font-size:17px;line-height:1.35}
.rulesBox dt{flex:0 0 72px;opacity:.7}
.rulesBox dd{margin:0}
.port .rulesBox{max-width:none;margin-top:6px}
.port .rulesBox dl{grid-template-columns:1fr 1fr;gap:3px 18px}
.port .rulesBox dl div{font-size:16px}

.tabs{display:flex;gap:8px;margin:10px 0 14px}
.rkList{list-style:none;margin:0;padding:0;display:grid;gap:2px 30px;font-size:24px}
.land .rkList{grid-template-columns:1fr 1fr;grid-auto-flow:column;grid-template-rows:repeat(10,auto)}
.rkList li{display:flex;gap:12px;padding:3px 8px;border-bottom:1px solid rgba(243,230,207,.12)}
.rkList li.me{background:var(--accent);color:var(--bg)}
.rkList .rk{width:44px;font-family:'Dela Gothic One',sans-serif}
.rkList .nm{flex:1}
.rkList .sc{font-family:'Dela Gothic One',sans-serif}
.rkMe{font-size:22px;margin-top:14px;color:var(--accent)}

.stats{display:flex;gap:16px;margin:8px 0 14px}
.stats div{background:var(--wood-dark);padding:8px 16px 4px;text-align:center;flex:1}
.stats span{display:block;font-size:18px;opacity:.8}
.stats b{font:400 40px 'Dela Gothic One',sans-serif;color:var(--accent)}
.hist{list-style:none;margin:0 0 18px;padding:0;font-size:20px;display:grid;gap:2px 28px}
.land .hist{grid-template-columns:1fr 1fr;grid-auto-flow:column;grid-template-rows:repeat(5,auto)}
.hist li{display:flex;gap:12px;border-bottom:1px solid rgba(243,230,207,.12);padding:2px 0}
.hist .d{opacity:.7;width:120px}
.hist .s{font-family:'Dela Gothic One',sans-serif;flex:1}
.vol{width:240px;accent-color:var(--accent)}

.land #lShare{width:470px}
.port .rkList{font-size:21px}
.port .rkList li{padding:1px 8px}

#toast{position:absolute;left:50%;top:14px;transform:translateX(-50%);background:var(--cream);color:var(--bg);font-size:24px;padding:8px 18px 6px;border-radius:3px;z-index:30;pointer-events:none;opacity:0;transition:opacity .2s;white-space:nowrap}
#toast.on{opacity:1}