html,body{width:100%;height:100%;margin:0;overflow:hidden}body{background:#090910}#game-canvas{touch-action:none;outline:none;width:100%;height:100%;display:block}.gomoku-2d-canvas{touch-action:none;z-index:1;width:100%;height:100%;display:block;position:fixed;inset:0}#hud{pointer-events:none;z-index:3;pointer-events:none;font-family:system-ui,sans-serif;position:fixed;inset:0}#hud .hud-bar{padding:8px env(safe-area-inset-right) 8px env(safe-area-inset-left);pointer-events:none;color:#eee;justify-content:center;gap:8px;font-family:system-ui,sans-serif;display:flex;position:fixed;left:0;right:0}#hud .hud-bar-top{top:env(safe-area-inset-top,0)}#hud .hud-bar-bottom{bottom:env(safe-area-inset-bottom,0);pointer-events:auto}#hud .hud-status{color:#f5f2ea;background:#0a0a0cb8;border:1px solid #f5f2ea2e;border-radius:8px;grid-template-columns:24px auto auto;grid-template-areas:"stone turn count""stone hint hint";align-items:center;gap:2px 8px;min-width:min(360px,100vw - 24px);max-width:calc(100vw - 24px);padding:8px 12px;display:grid;box-shadow:0 6px 18px #00000038}#hud .hud-stone-mark{border-radius:50%;grid-area:stone;width:22px;height:22px;box-shadow:0 0 0 2px #ecc760a6}#hud .hud-status-black .hud-stone-mark{background:#101012;border:1px solid #3a3a42}#hud .hud-status-white .hud-stone-mark{background:#f7f3e8;border:1px solid #d8ceb9}#hud .hud-turn{grid-area:turn;font-size:18px;font-weight:750;line-height:1.1}#hud .hud-move-count{color:#f5f2eab8;grid-area:count;justify-self:end;font-size:13px}#hud .hud-hint{color:#ecc760;grid-area:hint;font-size:12px;line-height:1.2}#hud .hud-btn{color:#222;cursor:pointer;background:#ffffffd9;border:none;border-radius:6px;min-width:44px;min-height:44px;padding:0 14px;font-size:14px}#hud .hud-btn:disabled{opacity:.4;cursor:not-allowed}#hud .hud-modal-overlay{padding:max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));pointer-events:auto;z-index:20;background:#05060aa8;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}#hud .hud-modal-card{color:#f7f1df;text-align:center;background:linear-gradient(#28283afa,#14151ffa);border:1px solid #ecc76047;border-radius:8px;justify-items:center;gap:12px;width:min(320px,100vw - 32px);padding:20px;display:grid;box-shadow:0 18px 50px #00000075,inset 0 1px #ffffff0f}#hud .hud-modal-mark{background:radial-gradient(circle at 35% 28%,#4b4b4f 0 16%,#111216 62%,#050506 100%);border-radius:50%;width:32px;height:32px;box-shadow:0 0 0 2px #ecc76066,0 8px 18px #0000004d}#hud .hud-modal-confirm .hud-modal-mark{background:radial-gradient(circle at 35% 28%,#fdf6e4 0 18%,#d6b668 72%,#8b6730 100%)}#hud .hud-modal-mark-white{background:radial-gradient(circle at 35% 28%,#fff 0 18%,#eee8da 70%,#cfc4b4 100%)}#hud .hud-modal-title{color:#fff6dc;margin:0;font-size:26px;font-weight:800;line-height:1.1}#hud .hud-modal-message{color:#f7f1dfc2;max-width:24em;margin:0;font-size:14px;line-height:1.55}#hud .hud-modal-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%;margin-top:4px;display:grid}#hud .hud-modal-btn{cursor:pointer;border:1px solid #0000;border-radius:6px;min-height:44px;padding:0 14px;font:650 14px system-ui,sans-serif}#hud .hud-modal-btn-primary{color:#17130a;background:#ecc760;box-shadow:0 6px 18px #ecc7603d}#hud .hud-modal-btn-secondary{color:#f7f1df;background:#ffffff0f;border-color:#f7f1df38}#hud .hud-modal-btn:focus-visible{outline-offset:2px;outline:2px solid #fff6dc}#hud .hud-modal-win .hud-modal-actions{grid-template-columns:1fr}@media (orientation:landscape) and (min-width:600px){#hud .hud-bar-top{top:env(safe-area-inset-top,0)}#hud .hud-bar-bottom{justify-content:center;gap:12px}}@media (max-width:600px) and (orientation:portrait){#hud .hud-bar-bottom{padding-bottom:calc(env(safe-area-inset-bottom,0) + 8px)}}.app-toast{top:calc(env(safe-area-inset-top,0) + 12px);color:#fff;z-index:100;pointer-events:none;background:#000000bf;border-radius:999px;padding:8px 16px;font:14px system-ui,sans-serif;animation:3s forwards app-toast-fade;position:fixed;left:50%;transform:translate(-50%)}@keyframes app-toast-fade{0%{opacity:0}10%{opacity:1}90%{opacity:1}to{opacity:0}}#hud.plh-mode>.hud-bar{display:none}.plh-hud{pointer-events:none;color:#fff6f8;text-shadow:0 1px 2px #000000b3;font-family:system-ui,sans-serif;position:fixed;inset:0}.plh-status{top:calc(env(safe-area-inset-top,0) + 12px);left:calc(env(safe-area-inset-left,0) + 12px);background:#1c1219c7;border:1px solid #ffb6c152;border-radius:8px;width:min(360px,100vw - 24px);padding:12px;position:fixed;box-shadow:0 12px 34px #00000052}.plh-brand{color:#ffb6c1;margin-bottom:8px;font-size:18px;font-weight:800}.plh-status-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 10px;font-size:12px;line-height:1.3;display:grid}.plh-status-grid span{color:#fff6f8bd;min-width:0}.plh-status-grid b{color:#fff;font-weight:750}.plh-task{top:calc(env(safe-area-inset-top,0) + 12px);right:calc(env(safe-area-inset-right,0) + 12px);background:#0f0f12c2;border:1px solid #dda0dd4d;border-radius:8px;width:min(390px,100vw - 24px);padding:14px 16px;position:fixed}.plh-task h2{color:#ffd4dd;margin:0 0 6px;font-size:18px;line-height:1.2}.plh-task p{color:#fff6f8d1;margin:0;font-size:13px;line-height:1.55}.plh-message{left:50%;bottom:calc(env(safe-area-inset-bottom,0) + 96px);color:#fff6f8;text-align:center;background:#121012bd;border-left:3px solid #ffb6c1;border-radius:6px;width:min(720px,100vw - 24px);padding:12px 16px;font-size:14px;line-height:1.55;position:fixed;transform:translate(-50%)}.plh-prompt{left:50%;bottom:calc(env(safe-area-inset-bottom,0) + 54px);color:#211017;max-width:calc(100vw - 24px);text-shadow:none;background:#ffb6c1e6;border-radius:6px;padding:8px 14px;font-size:14px;font-weight:750;position:fixed;transform:translate(-50%)}.plh-actions{top:calc(env(safe-area-inset-top,0) + 132px);left:calc(env(safe-area-inset-left,0) + 12px);pointer-events:auto;gap:8px;display:flex;position:fixed}.plh-actions button,.plh-interact,.plh-mobile-pad button,.plh-choice button{color:#fff6f8;cursor:pointer;background:#ffffff1a;border:1px solid #fff6f838;border-radius:6px;min-height:44px;font:700 14px system-ui,sans-serif}.plh-actions button{padding:0 12px}.plh-interact{right:calc(env(safe-area-inset-right,0) + 18px);bottom:calc(env(safe-area-inset-bottom,0) + 18px);color:#211017;pointer-events:auto;min-width:86px;text-shadow:none;background:#ffb6c1db;position:fixed}.plh-mobile-pad{left:calc(env(safe-area-inset-left,0) + 18px);bottom:calc(env(safe-area-inset-bottom,0) + 18px);pointer-events:auto;grid-template-rows:repeat(2,44px);grid-template-columns:repeat(3,44px);gap:6px;display:grid;position:fixed}.plh-mobile-pad button{background:#141418b8;width:44px;padding:0}.plh-mobile-pad button[data-plh-move=forward]{grid-column:2}.plh-mobile-pad button[data-plh-move=left]{grid-area:2/1}.plh-mobile-pad button[data-plh-move=backward]{grid-area:2/2}.plh-mobile-pad button[data-plh-move=right]{grid-area:2/3}.plh-choice{pointer-events:auto;z-index:30;background:#050406a3;align-content:center;justify-items:center;gap:14px;padding:20px;display:grid;position:fixed;inset:0}.plh-choice h2{color:#ffccd5;text-align:center;margin:0;font-size:clamp(24px,5vw,42px)}.plh-choice-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:min(820px,100vw - 32px);display:grid}.plh-choice button{text-align:left;background:#20161df0;border-color:#ffb6c157;align-content:start;gap:8px;min-height:132px;padding:14px;display:grid}.plh-choice strong{color:#ffb6c1;font-size:20px}.plh-choice span{color:#fff6f8cc;font-size:13px;line-height:1.45}@media (max-width:760px){.plh-status,.plh-task{width:auto;left:12px;right:12px}.plh-task{top:calc(env(safe-area-inset-top,0) + 116px)}.plh-actions{top:calc(env(safe-area-inset-top,0) + 236px)}.plh-choice-grid{grid-template-columns:1fr}.plh-message{bottom:calc(env(safe-area-inset-bottom,0) + 114px)}.plh-prompt{bottom:calc(env(safe-area-inset-bottom,0) + 76px)}}#menu{z-index:5;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);background:linear-gradient(135deg,#1a1a2e 0%,#2d2d44 100%);position:fixed;inset:0;overflow-y:auto}.menu-shell{max-width:880px;margin:0 auto;padding:28px 18px}.menu-header h1{color:#eee;text-align:center;margin:8px 0 22px;font-family:system-ui,sans-serif;font-weight:500}.menu-grid{grid-template-columns:repeat(auto-fit,minmax(220px,320px));justify-content:center;gap:14px;display:grid}.menu-card{color:#eee;cursor:pointer;font:inherit;text-align:left;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:10px;grid-template-columns:84px 1fr;align-items:center;gap:14px;padding:14px;transition:transform .1s,background .2s,border-color .2s;display:grid}.menu-card:hover,.menu-card:focus{background:#ffffff1a;border-color:#ffffff2e;outline:none}.menu-card:active{transform:scale(.98)}.menu-card-thumb{object-fit:cover;background:#ffffff0f;border-radius:10px;width:84px;height:84px;box-shadow:0 8px 22px #00000038}.menu-card-name{font-size:18px;font-weight:650;line-height:1.2}@media (max-width:600px){.menu-shell{padding:24px 16px}.menu-grid{grid-template-columns:1fr}.menu-card{grid-template-columns:76px 1fr;gap:12px;padding:12px}.menu-card-thumb{width:76px;height:76px}}