/* Forge No Ads Games — first-pass gameplay polish.
   Layer after the existing renderers. Never substitutes for actual game-specific art/rules.
   Mobile-first, safe target sizes, focus, high contrast, reduced motion. */
:root {
  --fg-brass:#ffb85b;
  --fg-gold:#ffe0a1;
  --fg-coal:#10141c;
  --fg-edge:rgba(255,195,100,.42);
  --fg-elevate:0 8px 0 rgba(7,10,15,.36),0 22px 40px rgba(0,0,0,.3);
}
#play {background:radial-gradient(ellipse at 50% 0,rgba(193,100,37,.12),transparent 62%),#0d121a;color:#ffefd3;}
#play .bar {box-shadow:0 4px 22px rgba(0,0,0,.3);border-color:var(--fg-edge);}
#play .wrap {max-width:min(100%,1200px);margin-inline:auto;}
#play #stage {min-width:0;max-width:100%;overflow-wrap:break-word;}
#play #stage .tk{max-width:min(100%,1000px);color:#fef2dc!important;background:linear-gradient(150deg,#1d2330,#101822 65%,#1f1811)!important;border:1px solid var(--fg-edge);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;}
#play #stage .tk-felt{
  position:relative;
  border:2px solid rgba(240,196,110,.46);
  background:
    radial-gradient(ellipse at 26% 12%,rgba(255,242,198,.13),transparent 42%),
    radial-gradient(ellipse at 70% 120%,rgba(5,17,16,.83),transparent 62%),
    linear-gradient(145deg,#195f54,#0c3c38 52%,#082826);
  box-shadow:inset 0 2px rgba(255,245,205,.24),inset 0 0 48px rgba(0,0,0,.25),0 14px 40px rgba(0,0,0,.3);
  padding:clamp(12px,2.5vw,26px);
}
#play #stage .tk-paper{
  border:1px solid rgba(211,170,102,.65);
  background:linear-gradient(153deg,#fffdf6 0%,#f2e6d0 72%,#e1d0af 100%);
  box-shadow:inset 0 2px rgba(255,255,255,.8),0 9px 22px rgba(0,0,0,.18);
  color:#292322;
}
#play #stage .tk-bar{gap:12px;align-items:baseline;color:#fff1d7;}
#play #stage .tk-title{font:850 clamp(18px,3vw,25px)/1.2 system-ui,sans-serif;letter-spacing:-.02em;color:#ffb85b!important;}
#play #stage .tk-meta{font:650 13px/1.4 system-ui,sans-serif;letter-spacing:.04em;color:#ffdfa8!important;font-variant-numeric:tabular-nums;}
#play #stage .tk-note{font:600 15px/1.5 system-ui,sans-serif;color:#ffe9c1!important;background:rgba(255,177,76,.08)!important;min-height:1.6em;}
#play #stage .tk-paper{color:#292322!important;}
#play #stage .tk-paper :is(.tk-title,.tk-meta,.tk-note){color:#3a2c1e!important;}
#play #stage .tk-row{gap:10px}
#play #stage .tk-card{
  border:1px solid rgba(133,96,55,.28);
  border-radius:clamp(8px,1.1vw,13px);
  background:linear-gradient(160deg,#fffdf8,#f9eee0 67%,#e2d2ba);
  box-shadow:inset 0 2px rgba(255,255,255,.7),0 3px 0 rgba(71,50,39,.35),0 12px 18px rgba(0,0,0,.18);
  font-family:Georgia,serif;
}
#play #stage .tk-card.back{background:repeating-linear-gradient(45deg,#75321e 0 6px,#4b1c17 6px 12px);}
#play #stage .tk-die{
  border:1px solid rgba(148,108,55,.5);
  background:radial-gradient(circle at 22% 15%,#fff 0%,#fffbef 54%,#e5d9c6 100%);
  box-shadow:inset 0 2px white,0 5px 0 #bc9f7a,0 11px 20px rgba(0,0,0,.25);
}
#play #stage .tk-cell:not(.off){
  border:1px solid rgba(159,120,61,.25);
  box-shadow:inset 0 1px rgba(255,255,255,.26),0 3px 9px rgba(0,0,0,.12);
  font-family:system-ui,sans-serif;
  font-variant-numeric:tabular-nums;
}
#play #stage :is(button, [role="button"], input, select, [tabindex]):focus-visible,
#tools :is(button,[role="button"],[tabindex]):focus-visible{
  outline:3px solid #ffdc78!important;
  outline-offset:3px;
}
#play #stage :is(button, [role="button"]):not(:disabled),
#tools button:not(:disabled){touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
#play #stage .tk-actions button, #tools button {
  min-height:44px;
  font-family:system-ui,-apple-system,sans-serif;
  font-weight:800;
  letter-spacing:.01em;
}
#play #stage .tk-actions .pri{
  color:#261707;
  border:1px solid #ffdda0;
  background:linear-gradient(165deg,#fff1b4,#f2ac4b 55%,#dc7435);
  box-shadow:inset 0 2px rgba(255,255,255,.42),0 3px 0 #9c4c22,0 10px 18px rgba(0,0,0,.22);
}
#play #stage .tk-win,#play #stage .forge-win {max-width:min(100%,460px);}
#play #stage :is(.tk-card,.tk-cell,.tk-btn,.gcell,.c2048,.mcell){
  transition:box-shadow 150ms ease,filter 150ms ease,transform 150ms ease;
}
@media(hover:hover) and (pointer:fine){
 #play #stage :is(button.tk-cell,button.tk-btn,button.gcell,button.mcell):hover:not(:disabled){
   filter:brightness(1.08);
   box-shadow:0 0 0 2px rgba(249,194,95,.35),0 8px 18px rgba(0,0,0,.2);
 }
 #play #stage .tk-card:not(.back):hover{filter:brightness(1.035);}
}
@media(max-width:600px){
 #play .bar{gap:6px!important;padding-inline:8px!important;}
 #play .bar .back{font-size:14px!important;padding-inline:10px!important;flex-shrink:0;}
 #play .bar #playTitle{min-width:0;flex:1 1 auto;font-size:16px!important;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
 #play .bar #difficulty{max-width:84px;min-width:68px;font-size:13px!important;padding-inline:6px!important;}
 #play .bar .f3d-mode{padding-inline:7px!important;}
 #play .wrap{width:100%;min-width:0;padding-inline:clamp(7px,2vw,16px);box-sizing:border-box;}
 #play #stage .tk{padding:3px 0 16px;}
 #play #stage .tk-felt{padding:12px 9px;}
 #play #stage .tk-bar{align-items:center;}
 #play #stage .tk-actions{display:flex;flex-wrap:wrap;gap:8px;}
 #play #stage .tk-actions button{flex:1 1 auto;}
 #play #stage .tk-row{min-width:0}
 #play #stage .tk-card{max-width:100%;}
 #play #stage canvas{max-width:100%;}
}
@media(max-width:360px){#play #stage .tk-actions button{font-size:13px;padding-inline:10px;}}
@media(prefers-reduced-motion:reduce){
 #play #stage *,#play #tools *{animation:none!important;transition:none!important;scroll-behavior:auto!important;}
}
@media(forced-colors:active){
 #play #stage .tk-paper,#play #stage .tk-felt,#play #stage .tk-card,#play #stage .tk-cell{forced-color-adjust:auto;border:1px solid CanvasText;}
}

/* State-driven sea battle. Hit/miss color and art follow game engine output.
   44px minimum tiles with keyboard-scroll access on narrow screens. */
#play #stage .forge-sea-view {
  display:block;
  max-width:100%;
  overflow:auto;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  border-radius:18px;
  scrollbar-color:#ffb967 #142333;
  margin:12px auto;
  box-shadow:0 18px 30px rgba(0,0,0,.22);
}
#play #stage .forge-sea-view:focus-visible{
  outline:3px solid #ffe0a1;
  outline-offset:2px;
}
#play #stage .forge-sea-grid{
  box-sizing:border-box;
  background:
    radial-gradient(circle at 50% 0%,rgba(195,239,249,.18),transparent 54%),
    repeating-linear-gradient(160deg,rgba(238,252,255,.07) 0 3px,transparent 3px 17px),
    linear-gradient(145deg,#103249,#0a405a,#052030) !important;
  border:1px solid rgba(169,231,254,.38);
  box-shadow:inset 0 1px rgba(255,255,255,.2),0 10px 20px rgba(0,0,0,.27);
}
#play #stage .forge-sea-cell{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:44px;
  min-width:44px;
  border-radius:7px!important;
  font-size:clamp(18px,2.6vw,22px)!important;
  background:linear-gradient(135deg,#258db2 0%,#155e83 45%,#074260 100%)!important;
  border:1px solid rgba(170,244,255,.26)!important;
  box-shadow:inset 0 2px 4px rgba(234,255,255,.18),inset 0 -3px rgba(0,24,38,.34),0 2px 7px rgba(0,0,0,.24)!important;
}
#play #stage .forge-sea-cell::after{
  content:"";position:absolute;inset:3px;pointer-events:none;border-radius:4px;
  background:linear-gradient(130deg,rgba(244,255,255,.22),transparent 48%);
  z-index:-1;
}
#play #stage .forge-sea-cell[data-ship="1"]{
  background:linear-gradient(140deg,#9eb8bb,#38647d 48%,#183447)!important;
  box-shadow:inset 0 2px rgba(255,255,255,.48),inset -3px -5px rgba(4,19,34,.32),0 3px 9px rgba(0,0,0,.28)!important;
}
#play #stage .forge-sea-cell[data-shot="hit"]{
  background:radial-gradient(circle at 50% 48%,#ffa336 0%,#dc541d 43%,#732416 100%)!important;
  box-shadow:inset 0 0 0 1px #ffd9a7,0 0 12px rgba(255,145,55,.3)!important;
}
#play #stage .forge-sea-cell[data-shot="miss"]{
  background:radial-gradient(circle at 45% 45%,#57bad2 0%,#185d81 65%,#092f48 100%)!important;
  color:#daf8ff!important;
}
#play #stage .forge-sea-cell:focus-visible{
  outline:3px solid #ffd575!important;outline-offset:1px;z-index:3;
}
@media(hover:hover) and (pointer:fine){
 #play #stage .forge-sea-cell:not(:disabled):hover{
  filter:brightness(1.18);
  transform:translateY(-1px);
 }
}
@media(prefers-reduced-motion:no-preference){
 #play #stage .forge-sea-cell[data-shot="hit"]{animation:forgeSeaPulse 450ms ease-out 1;}
 @keyframes forgeSeaPulse{
  0%{filter:brightness(1.8) saturate(1.5);}
  70%{filter:brightness(1.16);}
  100%{filter:brightness(1);}
 }
}