/* ネストラン v2：日なたの島の木・クリーム・金のふち（画面の部品の絵が届いたら差し替える） */
:root{--ink:#3b2a17;--cream:#fff8e8;--cream2:#f6e7c4;--wood:#c98a3e;--wood2:#8a5522;--gold:#f7c948;--gold2:#c9901c;--teal:#1f8fa3;--teal2:#126174;--coral:#f0614a;--navy:#14243b;--safe-b:env(safe-area-inset-bottom,0px);
  --NT:#8b6fd6;--NF:#3fae7a;--SJ:#3f7fd1;--SP:#e8823a;--font:"Hiragino Maru Gothic ProN","Hiragino Sans","BIZ UDPGothic","Yu Gothic UI","Meiryo",system-ui,sans-serif}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#7cc0e8;color:var(--ink);font:15px/1.5 var(--font);touch-action:none;user-select:none;-webkit-user-select:none;overscroll-behavior:none}
canvas#c{position:fixed;inset:0;width:100%;height:100%;display:block}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
.scr{position:fixed;inset:0;display:none}.scr.on{display:block}
#flash{position:fixed;inset:0;background:radial-gradient(circle,transparent 40%,rgba(255,60,40,.55));opacity:0;pointer-events:none;z-index:3}
/* パネル・ボタン */
.panel{background:linear-gradient(#fffaf0,#f8ebcd);border:3px solid var(--wood);border-radius:22px;box-shadow:0 0 0 2px var(--gold) inset,0 0 0 5px rgba(255,255,255,.55) inset,0 10px 0 var(--wood2),0 18px 40px rgba(20,30,50,.35)}
.ribbon{margin:-6px auto 10px;display:table;padding:6px 26px;color:#fff;font-size:19px;letter-spacing:.06em;background:linear-gradient(#2aa3b8,var(--teal2));border-radius:12px;border:2px solid var(--gold);box-shadow:0 4px 0 #0b4352;text-shadow:0 2px 0 rgba(0,0,0,.25)}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:52px;border-radius:16px;font-weight:800;font-size:17px;letter-spacing:.04em;position:relative;transition:transform .08s}
.btn:active{transform:translateY(3px)}
.btn.main{color:#fff;background:linear-gradient(#ffb547 0%,#f58a1f 55%,#e2700c 100%);border:2px solid var(--gold);box-shadow:0 0 0 2px #fff6 inset,0 5px 0 #a64d06,0 8px 14px rgba(0,0,0,.2);text-shadow:0 2px 0 #b8560a}
.btn.big{height:60px;font-size:20px}
.btn.sub{color:#fff;background:linear-gradient(#36b2c6,var(--teal) 60%,#177587);border:2px solid #9fe3ec;box-shadow:0 5px 0 #0b4b58,0 8px 14px rgba(0,0,0,.18);text-shadow:0 2px 0 #0d5361}
.btn.tab{background:linear-gradient(#fffaf0,var(--cream2));border:2px solid var(--wood);box-shadow:0 4px 0 var(--wood2);color:var(--wood2)}
.btn.small{height:42px;font-size:15px}
.btn.mute{width:48px;flex:none}.btn.mute:before{content:"♪";font-size:20px}.btn.mute.off:before{content:"♪";opacity:.3}
input{font:inherit;color:var(--ink);background:#fff;border:2px solid var(--cream2);border-radius:12px;padding:8px 12px;box-shadow:0 2px 0 rgba(0,0,0,.06) inset;outline:none}
input:focus{border-color:var(--gold)}
.note{font-size:13px;opacity:.75;margin:6px 0}
/* タイトル */
#title{display:none;overflow-y:auto;touch-action:pan-y;padding:max(14px,env(safe-area-inset-top)) 14px 24px}
#title.on{display:flex;flex-direction:column;align-items:center}
.logo{display:flex;flex-direction:column;align-items:center;margin:6px 0 10px;filter:drop-shadow(0 6px 10px rgba(20,40,70,.35))}
.logo .emblem{width:84px;height:84px;border-radius:50%;background:radial-gradient(circle at 50% 62%,#fff8e0 0 22%,transparent 23%),radial-gradient(ellipse 34% 40% at 50% 46%,#ffe27a 0 60%,#f1a92b 61% 100%);box-shadow:0 0 0 5px #8a5522,0 0 0 8px var(--gold);margin-bottom:-14px;z-index:1}
.logo h1{margin:0;text-align:center;line-height:1}
.logo h1 span{display:block;font-size:52px;font-weight:900;letter-spacing:.04em;color:#fff;-webkit-text-stroke:7px #8a4a12;paint-order:stroke fill;text-shadow:0 6px 0 #5a2d06}
.logo h1 small{display:inline-block;margin-top:6px;padding:3px 16px;font-size:16px;color:#fff;background:var(--teal);border:2px solid var(--gold);border-radius:99px;letter-spacing:.2em}
.card{width:min(460px,100%);padding:18px 18px 16px}
.lead{margin:0 0 10px;font-size:14px;text-align:center}
.f{display:flex;flex-direction:column;gap:4px;margin:8px 0}.f>span{font-size:12px;font-weight:700;color:var(--wood2)}
.types{display:grid;grid-template-columns:repeat(8,1fr);gap:4px}
.types button{height:32px;border-radius:8px;font-size:11.5px;font-weight:800;color:#fff;opacity:.55;background:var(--c)}
.types button[data-g=NT]{--c:var(--NT)}.types button[data-g=NF]{--c:var(--NF)}.types button[data-g=SJ]{--c:var(--SJ)}.types button[data-g=SP]{--c:var(--SP)}
.types button.on{opacity:1;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--gold);transform:scale(1.06)}
.skill{display:flex;gap:10px;align-items:center;margin:8px 0 12px;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.7);border:1px dashed var(--wood);font-size:13.5px;line-height:1.45}
.skill small{opacity:.75}
.sk-ic{flex:none;width:38px;height:38px;border-radius:50%;box-shadow:0 0 0 3px #fff,0 2px 4px rgba(0,0,0,.2)}
.ic-NT{background:radial-gradient(circle at 40% 35%,#cdb8ff,var(--NT))}.ic-NF{background:radial-gradient(circle at 40% 35%,#b8f0cf,var(--NF))}.ic-SJ{background:radial-gradient(circle at 40% 35%,#bcd6ff,var(--SJ))}.ic-SP{background:radial-gradient(circle at 40% 35%,#ffd2a8,var(--SP))}
.btns{display:flex;flex-direction:column;gap:10px}
.row{display:flex;gap:8px}.row input{flex:1;min-width:0}.row .btn{width:auto;padding:0 16px;flex:none}
.row2{display:flex;gap:8px;margin-top:12px}
/* 待合 */
#lobby.on,#over.on{display:flex;align-items:center;justify-content:center;padding:16px}
#over{background:linear-gradient(transparent 30%,rgba(20,36,59,.4))}
#over.on{align-items:flex-end}#over .card{max-height:60vh;overflow:auto;touch-action:pan-y}
@media (max-aspect-ratio:3/4){#ovList li .st{display:none}#ovList li{padding:5px 10px}#ovList{gap:4px}}
@media (min-aspect-ratio:4/3){#over.on{justify-content:flex-end;align-items:center}#over .card{max-height:92vh;width:min(420px,52vw)}}
#lbList,#ovList{list-style:none;margin:6px 0 12px;padding:0;display:flex;flex-direction:column;gap:6px;max-height:44vh;overflow:auto}
#lbList li{display:flex;align-items:center;gap:8px;padding:8px 10px;background:#fff;border-radius:12px;border:2px solid var(--cream2)}
.tp{font-size:11px;font-weight:800;color:#fff;padding:2px 7px;border-radius:7px;background:var(--c)}
.tp[data-g=NT]{--c:var(--NT)}.tp[data-g=NF]{--c:var(--NF)}.tp[data-g=SJ]{--c:var(--SJ)}.tp[data-g=SP]{--c:var(--SP)}
li small{margin-left:auto;font-size:11px;opacity:.6}
/* 試合 */
#touchL{position:fixed;left:0;bottom:0;width:48%;height:65%}
#touchR{position:fixed;inset:0}
#joyBase{position:fixed;width:124px;height:124px;margin:-62px 0 0 -62px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.08),rgba(255,255,255,.22));border:3px solid rgba(255,255,255,.55);opacity:0;pointer-events:none;transition:opacity .12s}
#joyBase.on{opacity:1}
#joyKnob{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fff,#e7dcc4);box-shadow:0 3px 6px rgba(0,0,0,.3)}
#topL{position:fixed;left:10px;top:max(10px,env(safe-area-inset-top));display:flex;gap:8px;align-items:center}
.ib{width:40px;height:40px;border-radius:12px;background:rgba(255,248,232,.92);border:2px solid var(--wood);box-shadow:0 3px 0 var(--wood2);font-weight:900;color:var(--wood2)}
#myNest{display:flex;align-items:center;gap:6px;height:44px;padding:0 14px 0 8px;border-radius:14px;background:linear-gradient(#fffaf0,var(--cream2));border:2px solid var(--wood);box-shadow:0 0 0 2px var(--gold) inset,0 3px 0 var(--wood2)}
.nest-ic{width:28px;height:28px;border-radius:50%;background:radial-gradient(circle at 50% 40%,#fff 0 22%,transparent 24%),radial-gradient(circle,#d9b46a 0 52%,#8a5a2b 54% 70%,transparent 72%);box-shadow:0 0 0 3px var(--nc)}
#myPts{font-size:26px;font-weight:900;min-width:26px;text-align:center}
#myPts.bump{animation:bump .35s}
@keyframes bump{40%{transform:scale(1.5);color:#e2700c}}
#carry{width:40px;height:44px;border-radius:12px;background:rgba(20,36,59,.45);display:grid;place-items:center;opacity:0;transition:opacity .2s}
#carry.on{opacity:1}#carry span{width:20px;height:26px;border-radius:50% 50% 46% 46%/60% 60% 40% 40%;background:#fbf6ea;box-shadow:0 0 0 2px rgba(0,0,0,.25) inset}
#carry.k-s span{background:radial-gradient(circle at 30% 40%,#4d8fb5 0 3px,transparent 4px),radial-gradient(circle at 65% 65%,#4d8fb5 0 3px,transparent 4px),#bfe3f2}
#carry.k-v span{background:repeating-linear-gradient(0deg,#dfe6ee 0 5px,#9fb0c4 5px 8px)}
#carry.k-g span{background:radial-gradient(circle at 35% 30%,#fff3b0,#ffd34d 60%,#e0a400);box-shadow:0 0 10px #ffd34d}
#carry.k-r span{background:linear-gradient(#ff8a8a,#ffd36b,#9ef09a,#7fd0ff,#c79bff);box-shadow:0 0 12px #fff}
#mini{position:fixed;left:10px;top:calc(max(10px,env(safe-area-inset-top)) + 54px);width:110px;height:110px;border-radius:50%;background:rgba(40,110,160,.55);border:3px solid var(--cream);box-shadow:0 0 0 2px var(--wood),0 4px 10px rgba(0,0,0,.25)}
#timer{position:fixed;left:50%;top:max(10px,env(safe-area-inset-top));transform:translateX(-50%);min-width:96px;padding:4px 16px;text-align:center;font-size:24px;font-weight:900;color:#fff;background:linear-gradient(#24415f,var(--navy));border:2px solid var(--gold);border-radius:14px;box-shadow:0 4px 0 #0a1424;letter-spacing:.04em}
#timer.last{background:linear-gradient(#e2533c,#a5281a);animation:pulse 1s infinite}
@keyframes pulse{50%{transform:translateX(-50%) scale(1.06)}}
#board{position:fixed;right:8px;top:max(8px,env(safe-area-inset-top));list-style:none;margin:0;padding:6px 8px;min-width:132px;background:rgba(20,36,59,.62);border:2px solid rgba(247,201,72,.75);border-radius:14px;color:#fff;font-size:12.5px;backdrop-filter:blur(4px)}
#board li{display:flex;align-items:center;gap:6px;line-height:1.75}#board li i{width:10px;height:10px;border-radius:50%;background:var(--nc);box-shadow:0 0 0 2px #fff4}
#board li span{flex:1;max-width:84px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#board li b{font-size:14px}
#board li.me{color:var(--gold);font-weight:800}
#banner{position:fixed;left:50%;top:22%;transform:translate(-50%,-10px) scale(.9);text-align:center;opacity:0;transition:.25s;pointer-events:none;white-space:nowrap}
#banner.on{opacity:1;transform:translate(-50%,0) scale(1)}
#banner b{display:block;font-size:30px;font-weight:900;color:#fff;-webkit-text-stroke:6px #8a4a12;paint-order:stroke fill;text-shadow:0 4px 0 #5a2d06}
#banner small{display:inline-block;margin-top:4px;padding:2px 12px;border-radius:99px;background:rgba(20,36,59,.7);color:#fff;font-size:13px}
#banner.gold b{-webkit-text-stroke-color:#a86b00;color:#fff3b0}#banner.rainbow b{-webkit-text-stroke-color:#6b3fa8;color:#fff}
#banner.alarm b{-webkit-text-stroke-color:#9b1a10;color:#fff;animation:shake .35s 2}#banner.steal b{-webkit-text-stroke-color:#126174}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
#count{position:fixed;left:50%;top:40%;transform:translate(-50%,-50%);font-size:84px;font-weight:900;color:#fff;-webkit-text-stroke:10px #8a4a12;paint-order:stroke fill;text-shadow:0 8px 0 #5a2d06;opacity:0;pointer-events:none;white-space:nowrap}
#count.on{opacity:1}#count.go{animation:pop .5s}
@keyframes pop{0%{transform:translate(-50%,-50%) scale(2.2);opacity:0}60%{transform:translate(-50%,-50%) scale(.92)}}
#stealBar{position:fixed;left:50%;bottom:calc(150px + var(--safe-b));transform:translateX(-50%);width:200px;height:26px;border-radius:99px;background:rgba(20,36,59,.7);border:2px solid #fff;overflow:hidden;opacity:0;transition:opacity .15s;pointer-events:none}
#stealBar.on{opacity:1}#stealBar i{position:absolute;inset:0;width:calc(var(--p,0)*100%);background:linear-gradient(90deg,#ff7a59,#ffd34d)}#stealBar span{position:relative;display:block;text-align:center;color:#fff;font-weight:800;font-size:13px;line-height:22px;text-shadow:0 1px 2px #000}
#acts{position:fixed;right:max(12px,env(safe-area-inset-right));bottom:calc(14px + var(--safe-b));width:210px;height:200px;pointer-events:none}
.act{position:absolute;pointer-events:auto;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:900;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.35);border:3px solid var(--gold);box-shadow:0 0 0 2px #fff8 inset,0 5px 0 rgba(0,0,0,.35),0 8px 16px rgba(0,0,0,.25);overflow:hidden}
.act:after{content:"";position:absolute;inset:0;background:conic-gradient(rgba(10,20,40,.62) calc(var(--cd,0)*360deg),transparent 0);border-radius:50%;pointer-events:none}
.act.on{transform:scale(.92)}
.act span{position:relative;z-index:1}
.ht{right:0;bottom:0;width:104px;height:104px;font-size:17px;background:radial-gradient(circle at 40% 30%,#ff9a7d,var(--coral) 55%,#c23a24)}
.jp{right:112px;bottom:4px;width:76px;height:76px;font-size:13px;background:radial-gradient(circle at 40% 30%,#7fd6e3,var(--teal) 60%,#0f6576)}
.sk{right:20px;bottom:116px;width:78px;height:78px;font-size:12px;background:radial-gradient(circle at 40% 30%,#ffd2a8,var(--SP))}
.sk[data-g=NT]{background:radial-gradient(circle at 40% 30%,#d9c8ff,var(--NT))}.sk[data-g=NF]{background:radial-gradient(circle at 40% 30%,#c8f2d9,var(--NF))}.sk[data-g=SJ]{background:radial-gradient(circle at 40% 30%,#c8dcff,var(--SJ))}
.act .ic{width:34px;height:34px;margin-bottom:2px;background:currentColor;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat;color:#fff}
.ht .ic{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 11V5a1.5 1.5 0 013 0v5h1V3.5a1.5 1.5 0 013 0V10h1V5a1.5 1.5 0 013 0v8c0 4-3 7-7 7-3 0-5-1.6-6.2-4L3.6 12.3a1.4 1.4 0 012.3-1.5L7 12z'/%3E%3C/svg%3E")}
.jp .ic{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3l7 8h-4v6H9v-6H5z'/%3E%3Crect x='7' y='19' width='10' height='2.4' rx='1.2'/%3E%3C/svg%3E")}
.sk .ic{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.6 6.6L21 9.3l-5 4.4 1.6 6.8L12 17l-5.6 3.5L8 13.7 3 9.3l6.4-.7z'/%3E%3C/svg%3E")}
#keysHelp{position:fixed;left:50%;bottom:calc(8px + var(--safe-b));transform:translateX(-50%);font-size:12px;color:#fff;background:rgba(20,36,59,.5);padding:3px 12px;border-radius:99px;white-space:nowrap}
body.touch #keysHelp{display:none}
#watchTag{display:none;position:fixed;left:50%;bottom:20px;transform:translateX(-50%);padding:6px 18px;border-radius:99px;background:rgba(20,36,59,.75);color:#fff;font-weight:800}
body.watching #watchTag{display:block}body.watching #acts,body.watching #myNest,body.watching #carry{display:none}
/* 3D の上の札 */
.tag{position:fixed;transform:translate(-50%,-100%);padding:1px 9px 2px;border-radius:9px;background:rgba(20,36,59,.62);color:#fff;font-size:12px;font-weight:700;white-space:nowrap;pointer-events:none;border-bottom:3px solid var(--nc);display:none}
.tag.me{background:rgba(247,201,72,.9);color:var(--ink)}
.tag.thief{background:#d9311f;animation:shake .4s infinite}
.tag.nest{font-size:17px;font-weight:900;padding:2px 12px;border-radius:12px;background:var(--nc);border:2px solid #fff;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.pop{position:fixed;transform:translate(-50%,-100%);font-weight:900;font-size:18px;-webkit-text-stroke:4px rgba(40,20,5,.85);paint-order:stroke fill;pointer-events:none;white-space:nowrap}
.pop.big{font-size:30px}
#arrows i{position:fixed;width:0;height:0;border-left:22px solid var(--c);border-top:14px solid transparent;border-bottom:14px solid transparent;filter:drop-shadow(0 0 3px #fff) drop-shadow(0 2px 2px rgba(0,0,0,.4));pointer-events:none}
#arrows i.thief{animation:blink .4s infinite}@keyframes blink{50%{opacity:.35}}
/* 結果 */
#ovList li{display:grid;grid-template-columns:28px 12px 1fr auto auto;align-items:center;gap:8px;padding:8px 10px;background:#fff;border-radius:12px;border:2px solid var(--cream2)}
#ovList li em{font-style:normal;font-weight:900;font-size:18px;text-align:center;color:var(--wood2)}
#ovList li.rk1{background:linear-gradient(#fff6d0,#ffe791);border-color:var(--gold)}#ovList li.rk1 em{color:#c98a00}
#ovList li.me{box-shadow:0 0 0 3px var(--teal)}
#ovList li i{width:12px;height:12px;border-radius:50%;background:var(--nc)}
#ovList li b{font-size:20px}#ovList li b small{font-size:11px;margin-left:2px}
#ovList li .st{grid-column:3/6;margin:-4px 0 0;font-size:11px;opacity:.6}
.ovme{text-align:center;font-size:13px;margin:0 0 6px}
#ovEgg{display:flex;align-items:center;gap:12px;justify-content:center;margin:0 0 12px;padding:8px;border-radius:14px;background:radial-gradient(circle at 25% 50%,#fff,#fff3cf);border:2px dashed var(--gold)}
#ovEgg canvas{width:84px;height:84px;animation:eggin 1s cubic-bezier(.2,1.6,.4,1)}
@keyframes eggin{0%{transform:scale(0) rotate(-30deg)}}
#ovEgg p{margin:0}#ovEgg em{font-style:normal;margin-left:6px;padding:1px 8px;border-radius:99px;background:var(--coral);color:#fff;font-size:12px;font-weight:800}
/* 図鑑・遊び方 */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:14px;background:rgba(10,20,40,.5);z-index:10}
.modal.on{display:flex}.modal .card{max-height:92vh;overflow:auto;touch-action:pan-y}
#zkGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:6px;margin:8px 0 12px}
.zk{display:flex;flex-direction:column;align-items:center;padding:4px;background:#fff;border-radius:12px;border:2px solid var(--cream2);font-size:10.5px;text-align:center}
.zk canvas{width:58px;height:58px}.zk.no{opacity:.6}.zk.sp{border-color:var(--gold);background:#fff8dc}
.howl{padding-left:18px;margin:0 0 12px;font-size:14px}.howl li{margin:4px 0}
#toast{position:fixed;left:50%;bottom:30%;transform:translateX(-50%);padding:8px 18px;border-radius:12px;background:rgba(20,36,59,.85);color:#fff;font-size:14px;opacity:0;transition:opacity .2s;pointer-events:none;z-index:20;max-width:90vw;text-align:center}
#toast.on{opacity:1}
#net{position:fixed;left:50%;top:60px;transform:translateX(-50%);padding:4px 14px;border-radius:99px;background:#d9311f;color:#fff;font-size:13px;display:none;z-index:20}#net.on{display:block}
#fps{position:fixed;left:8px;bottom:8px;font:11px monospace;color:#fff;text-shadow:0 1px 1px #000;pointer-events:none}
/* 横向きのスマホ */
@media (max-height:500px){#mini{width:86px;height:86px}#timer{font-size:20px}#board{font-size:11px;min-width:118px}#board li{line-height:1.55}#acts{transform:scale(.85);transform-origin:right bottom}.logo h1 span{font-size:40px}#banner{top:16%}#banner b{font-size:24px}}
@media (max-width:420px){#board{font-size:11px;min-width:112px;padding:4px 6px}#board li span{max-width:62px}#mini{width:92px;height:92px}.types button{font-size:10px;height:30px}.logo h1 span{font-size:44px}}

/* のこり 30 秒 */
body.lastspurt #timer{background:linear-gradient(#b05bd8,#6b2fa8);box-shadow:0 4px 0 #3b1660,0 0 18px #e2b8ff}
body.lastspurt #hud:after{content:"";position:fixed;inset:0;pointer-events:none;box-shadow:inset 0 0 60px rgba(200,140,255,.45);animation:spurt 1s infinite}
@keyframes spurt{50%{box-shadow:inset 0 0 90px rgba(255,200,120,.55)}}
body.clean .scr,body.clean #tags,body.clean #fps,body.clean #toast{display:none!important}
.credit{font-size:12px;text-align:right}.credit a{color:var(--teal2)}