html,body{margin:0;height:100%;overflow:hidden;background:#071120;color:#fff;font-family:Arial,Helvetica,sans-serif}
canvas{display:block;width:100%;height:100%;background:#071120;cursor:crosshair}
#hud{position:fixed;left:9px;bottom:9px;z-index:4;text-shadow:0 2px 5px #000;pointer-events:none}
#score{font-size:25px;font-weight:700}#rank{font-size:17px;margin-top:3px;color:#ddd}
#board{position:fixed;right:14px;top:8px;width:210px;z-index:4;text-shadow:0 2px 5px #000;pointer-events:none}
#board h3{font-size:20px;margin:0 0 6px}#leaders{margin:0;padding-left:24px;line-height:1.35;font-size:15px}#leaders .leaderLength{float:right}#leaders .spectatorTarget{cursor:pointer;pointer-events:auto}
#status{position:fixed;left:10px;top:8px;z-index:4;font-size:12px;color:#bbb;text-shadow:0 1px 3px #000;pointer-events:none;white-space:pre-line;line-height:1.38}#status.debug{font-family:Consolas,'Courier New',monospace;color:#e6edf3;background:rgba(4,10,18,.72);border:1px solid #ffffff22;border-radius:7px;padding:7px 9px;min-width:214px;box-shadow:0 3px 14px #0006}
#overlay{position:fixed;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:12px;background:rgba(2,6,12,.38)}
#panel{box-sizing:border-box;width:min(440px,calc(100vw - 24px));max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);overflow:hidden;padding:0;background:#111923;border:1px solid #334151;border-radius:16px;text-align:center;box-shadow:0 18px 60px #0008}
#panelScroll{box-sizing:border-box;width:100%;max-height:calc(100vh - 26px);max-height:calc(100dvh - 26px);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-gutter:stable;padding:28px;scrollbar-width:thin;scrollbar-color:#5f7489 #0b1118}
#panelScroll::-webkit-scrollbar{width:7px;height:7px}
#panelScroll::-webkit-scrollbar-track{background:#0b1118;border-radius:8px}
#panelScroll::-webkit-scrollbar-thumb{background:#5f7489;border:1px solid #0b1118;border-radius:8px}
#panelScroll::-webkit-scrollbar-thumb:hover{background:#6da7d6}
#splashImage{display:block;width:100%;max-width:392px;height:auto;margin:0 auto 14px;border-radius:14px;border:1px solid #425365;box-shadow:0 10px 28px rgba(0,0,0,.42)}
#panel h1{margin:0 0 8px;font-size:30px}#panel p{color:#c6cbd2;line-height:1.45;white-space:pre-line}
#panel input,#panel button{box-sizing:border-box;width:100%;height:46px;border-radius:9px;font-size:16px}
#panel input{padding:0 13px;background:#0b1118;color:#fff;border:1px solid #3a4653;outline:none}
#panel button{margin-top:12px;border:0;background:#54e47d;color:#fff;font-weight:800;cursor:pointer}
#panel #play,#panel #spectate{color:#fff}
#panel .small{font-size:12px;color:#89929c;margin-top:12px}
#colorRow{margin-top:13px;text-align:left}
#colorRow .label{display:block;font-size:13px;color:#b7c0ca;margin:0 0 7px 2px}
#colors{display:flex;flex-direction:column;gap:8px;width:100%}
#colors .colorLine{display:grid;gap:8px;width:100%}
#colors button{position:relative;overflow:hidden;width:100%;height:30px;margin:0;padding:0;border:0;border-radius:8px;cursor:pointer;box-shadow:none;transition:transform .08s}
#colors button:hover{transform:translateY(-1px)}
#colors button.selected,#panel #patterns button.selected{box-shadow:none}
#colors button.selected::after,#panel #patterns button.selected::after{content:"";position:absolute;inset:0;z-index:2;box-sizing:border-box;border:2px solid #fff;border-radius:8px;pointer-events:none}
.hidden{display:none!important}

#spectatorControls{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:9;display:flex;align-items:stretch;gap:8px;pointer-events:none}
#spectatorControls button{box-sizing:border-box;height:42px;border:1px solid #718499;border-radius:9px;background:#111923;color:#fff;cursor:pointer;pointer-events:auto;touch-action:manipulation}
#exitSpectate{padding:0 18px;white-space:nowrap;font-size:14px}
#spectatorPrev,#spectatorNext{width:54px;padding:0;background:rgba(17,25,35,.88);font-size:25px;font-weight:700;line-height:1}
#panel #spectate{background:#8fc4ee}


/* v1.9.11 smartphone layer. Desktop keeps the v1.9.10 layout unchanged. */
#mobileControls{display:none}
.smartphone html,.smartphone body{width:100%;height:100%;overscroll-behavior:none;-webkit-text-size-adjust:100%}
.smartphone body{-webkit-user-select:none;user-select:none}
.smartphone canvas{cursor:default;touch-action:none}
.smartphone #overlay{align-items:stretch;justify-content:stretch;padding:0;background:#071120}
.smartphone #panel{width:100vw;max-width:none;height:100vh;height:100dvh;max-height:100vh;max-height:100dvh;margin:0;overflow:hidden;padding:0;background:#111923;border:0;border-radius:0;box-shadow:none}
.smartphone #panelScroll{box-sizing:border-box;width:100%;height:100%;max-height:none;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-gutter:auto;touch-action:pan-y;padding:max(18px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left))}
.smartphone body.mobile-menu-open #overlay{background:#071120}
.smartphone body.mobile-menu-open #game,.smartphone body.mobile-menu-open #hud,.smartphone body.mobile-menu-open #board,.smartphone body.mobile-menu-open #status{visibility:hidden}
.smartphone #panelScroll::-webkit-scrollbar{width:5px}
.smartphone #splashImage{max-width:100%;margin-bottom:10px;border-radius:12px}
.smartphone #panel h1{font-size:26px}.smartphone #panel p{font-size:14px;margin:8px 0 12px}
.smartphone #panel input,.smartphone #panel button{height:48px;font-size:17px}
.smartphone #colors{gap:6px}.smartphone #colors .colorLine{gap:6px}.smartphone #colors button{height:32px}
.smartphone #board{right:max(8px,env(safe-area-inset-right));top:max(7px,env(safe-area-inset-top));width:155px}
.smartphone #board h3{font-size:16px}.smartphone #leaders{font-size:12px;line-height:1.28;padding-left:19px}
.smartphone #status{left:max(7px,env(safe-area-inset-left));top:auto;bottom:max(6px,env(safe-area-inset-bottom));font-size:10px;max-width:44vw}
.smartphone #hud{left:max(8px,env(safe-area-inset-left));top:calc(128px + env(safe-area-inset-top));bottom:auto;max-width:58vw}
.smartphone #score{font-size:18px;white-space:pre-line}.smartphone #rank{font-size:12px}
.smartphone #spectatorControls{bottom:calc(20px + env(safe-area-inset-bottom));gap:0}
.smartphone #spectatorPrev,.smartphone #spectatorNext{display:none}
.smartphone #exitSpectate{height:42px;font-size:14px;padding:0 14px}
.smartphone #mobileControls{display:block;position:fixed;inset:0;z-index:8;pointer-events:none}
.smartphone #mobilePlayControls,.smartphone #mobileSpectatorControls{position:absolute;inset:0;pointer-events:none}
.smartphone #mobileStick{position:absolute;left:calc(18px + env(safe-area-inset-left));bottom:calc(20px + env(safe-area-inset-bottom));width:142px;height:142px;border-radius:50%;background:rgba(10,20,32,.34);border:2px solid rgba(255,255,255,.22);box-shadow:inset 0 0 22px rgba(0,0,0,.38);pointer-events:auto;touch-action:none}
.smartphone #mobileStickKnob{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;background:rgba(210,235,255,.42);border:2px solid rgba(255,255,255,.58);box-shadow:0 3px 14px rgba(0,0,0,.38);transform:translate(0,0);pointer-events:none}
.smartphone #mobileBoost{position:absolute;right:calc(24px + env(safe-area-inset-right));bottom:calc(35px + env(safe-area-inset-bottom));width:96px;height:96px;border-radius:50%;border:2px solid rgba(255,255,255,.55);background:rgba(84,228,125,.74);color:#fff;font-size:17px;font-weight:900;box-shadow:0 5px 18px rgba(0,0,0,.42);pointer-events:auto;touch-action:none}
.smartphone #mobileBoost.pressed{transform:scale(.94);background:rgba(121,255,158,.94)}
.smartphone #mobileSpectatorControls{display:flex;align-items:center;justify-content:space-between;padding:0 calc(18px + env(safe-area-inset-right)) 0 calc(18px + env(safe-area-inset-left));box-sizing:border-box}
.smartphone #mobileSpectatorControls.hidden{display:none!important}
.smartphone #mobileSpectatorControls button{width:64px;height:54px;border-radius:13px;border:1px solid rgba(255,255,255,.45);background:rgba(17,25,35,.78);color:#fff;font-size:27px;font-weight:700;pointer-events:auto;touch-action:manipulation}
@media (orientation:landscape) and (max-height:520px){
 .smartphone #panel{height:100vh;height:100dvh;max-height:100vh;max-height:100dvh}
 .smartphone #panelScroll{padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
 .smartphone #panel h1{font-size:22px;margin-bottom:4px}.smartphone #panel p{font-size:12px;line-height:1.25;margin:4px 0 7px}
 .smartphone #panel input,.smartphone #panel button{height:40px;font-size:15px}.smartphone #panel button{margin-top:7px}
 .smartphone #colorRow{margin-top:8px}.smartphone #colors button{height:25px}.smartphone #panel .small{margin-top:7px}
 .smartphone #mobileStick{width:116px;height:116px;bottom:calc(10px + env(safe-area-inset-bottom))}
 .smartphone #mobileBoost{width:82px;height:82px;bottom:calc(18px + env(safe-area-inset-bottom))}
 .smartphone #hud{top:calc(128px + env(safe-area-inset-top));bottom:auto;max-width:56vw}
 .smartphone #spectatorControls{bottom:calc(10px + env(safe-area-inset-bottom))}
 .smartphone #exitSpectate{height:40px}
}

/* v1.9.71: external server list link; the login no longer embeds discovery. */
#serverListBox{margin-top:14px;padding-top:12px;border-top:1px solid #334151}
#panel #serverListButton{height:42px;margin-top:0;background:#6da7d6;color:#fff}
#panel #serverListButton:disabled{background:#263443;color:#fff;cursor:default}
#serverListStatus{margin-top:6px!important;min-height:15px;line-height:1.25;text-align:center}
.smartphone #serverListBox{margin-top:9px;padding-top:8px}
.smartphone #panel #serverListButton{height:38px;font-size:14px}
.smartphone #serverListStatus{font-size:11px;margin-top:4px!important}
@media (max-height:520px){.smartphone #serverListBox{margin-top:6px;padding-top:5px}.smartphone #serverListStatus{display:none}.smartphone #panel #serverListButton{height:34px}}

/* v1.9.29: pattern swatches use the same compact two-row visual language as colors. */
#patternRow{margin-top:12px;text-align:left}
#patternRow .label{display:block;font-size:13px;color:#b7c0ca;margin:0 0 7px 2px}
#patterns{display:flex;flex-direction:column;gap:8px;width:100%}
#patterns .patternLine{display:grid;gap:8px;width:100%}
#panel #patterns button{position:relative;overflow:hidden;width:100%;height:30px;margin:0;padding:0;border:0;border-radius:8px;cursor:pointer;box-shadow:none;transition:transform .08s}
#patterns .patternFill{position:absolute;inset:0;display:block;border-radius:8px;background-repeat:no-repeat;background-size:100% 100%;pointer-events:none}
#panel #patterns button:hover{transform:translateY(-1px)}
.smartphone #patternRow{margin-top:8px}.smartphone #patterns{gap:6px}.smartphone #patterns .patternLine{gap:6px}.smartphone #panel #patterns button{height:32px}
@media (orientation:landscape) and (max-height:520px){.smartphone #patternRow{margin-top:6px}.smartphone #panel #patterns button{height:25px}}

/* v1.9.72a: all Gameserver web-interface button labels stay white in every state. */
button,button:disabled,button:hover,button:focus,button:active{color:#fff!important;-webkit-text-fill-color:#fff}

/* v1.11.27 technical-cookie notice. No backdrop: keep the arena operable. */
#cookieNotice{
  box-sizing:border-box;position:fixed;z-index:30;left:50%;bottom:24px;
  width:min(570px,calc(100% - 48px));max-width:570px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:13px 14px 13px 18px;background:#111923;
  border:1px solid #405266;border-radius:12px;
  box-shadow:0 8px 28px rgba(0,0,0,.50);
  color:#edf3fa;visibility:hidden;opacity:0;pointer-events:none;
  transform:translate(-50%,calc(100% + 54px));
  transition:transform .46s cubic-bezier(.20,.85,.20,1),opacity .36s ease,
             visibility 0s linear .46s;
}
#cookieNotice.is-visible{
  transform:translate(-50%,0);visibility:visible;opacity:1;pointer-events:auto;
  transition-delay:0s;
}
#cookieNotice p{font-size:13px;line-height:1.42;margin:0;flex:1;min-width:0;color:#dce5ef}
#cookieNoticeConfirm{
  flex:0 0 auto;padding:0 17px;min-height:42px;
  border:0;border-radius:8px;background:#288d49;color:#fff;
  font:700 13px Arial,Helvetica,sans-serif;cursor:pointer;touch-action:manipulation;
}
#cookieNoticeConfirm:hover{background:#31a857}
#cookieNoticeConfirm:focus-visible{outline:2px solid #a7e3ff;outline-offset:2px}
/* Smartphones have no outer margin on any of the three lower edges. */
.smartphone #cookieNotice{
  left:0;right:0;bottom:0;width:100%;max-width:none;
  padding:14px max(16px,env(safe-area-inset-right))
          calc(14px + env(safe-area-inset-bottom))
          max(16px,env(safe-area-inset-left));
  border-radius:12px 12px 0 0;
  transform:translateY(calc(100% + 16px));
}
.smartphone #cookieNotice.is-visible{transform:translateY(0)}
@media (prefers-reduced-motion:reduce){
 #cookieNotice{transition:none}
}