/* Raised frames and tactile pieces for the five game tables. */
/* Reference board: 42 by 45; grid spans 39.5 by 42.6, with 19 lines. */
#play.grid-board.go-board{aspect-ratio:42 / 45;border:0;border-radius:2px;padding:0.037037% 0.363757%;background:repeating-linear-gradient(92deg,#85581109 0 1px,transparent 1px 11px),linear-gradient(110deg,#e7b644,#f1c45d 45%,#dba838);box-shadow:inset 0 1px 2px #fff9,inset -2px -2px 4px #9a641d88,0 5px 0 #a26b23,0 8px 0 #66441c,0 18px 25px #0008}#play.go-board button{--line:#735322}#play.go-board button .disc{inset:auto;left:6%;top:50%;width:88%;height:auto;aspect-ratio:1;transform:translateY(-50%);animation:none}#play.go-board button.hoshi:before{height:auto;aspect-ratio:1;top:50%;transform:translateY(-50%);background:#66471b}#featured .baduk{background:repeating-linear-gradient(92deg,#85581109 0 1px,transparent 1px 11px),linear-gradient(110deg,#e7b644,#f1c45d 45%,#dba838)}
#play.grid-board{width:min(100%,580px);padding:14px}#play.grid-board button{--line:#80623e;background-image:linear-gradient(var(--line),var(--line)),linear-gradient(var(--line),var(--line));background-size:100% 1px,1px 100%;background-position:center;background-repeat:no-repeat}#play.grid-board button.edge-left{background-size:50% 1px,1px 100%;background-position:right center,center}#play.grid-board button.edge-right{background-size:50% 1px,1px 100%;background-position:left center,center}#play.grid-board button.edge-top{background-size:100% 1px,1px 50%;background-position:center,center bottom}#play.grid-board button.edge-bottom{background-size:100% 1px,1px 50%;background-position:center,center top}#play.grid-board button.edge-left.edge-top{background-size:50% 1px,1px 50%;background-position:right center,center bottom}#play.grid-board button.edge-right.edge-top{background-size:50% 1px,1px 50%;background-position:left center,center bottom}#play.grid-board button.edge-left.edge-bottom{background-size:50% 1px,1px 50%;background-position:right center,center top}#play.grid-board button.edge-right.edge-bottom{background-size:50% 1px,1px 50%;background-position:left center,center top}#play.grid-board button.hoshi:before{content:'';position:absolute;width:20%;height:20%;border-radius:50%;background:#634629;top:40%;left:40%}#play.grid-board .disc{z-index:1}@media(max-width:700px){#play.grid-board{padding:7px}}
.mode-picker{display:flex;gap:5px;flex-wrap:wrap;order:-1;width:100%;padding-bottom:6px}.mode-picker[hidden]{display:none}.controls .mode-picker button{padding:11px 18px;border:1px solid #3d4967;background:#182139;color:#a6b2cb}.controls .mode-picker button[aria-pressed="true"]{background:linear-gradient(135deg,#ff8238,#e94b15);border-color:#ffb071;color:white;box-shadow:0 3px 0 #923313}.mode-help{font-size:11px;color:#b7c5df;line-height:1.7;margin:13px 0 0}.controls select:disabled{opacity:.4}.solo-wrap{grid-template-columns:1fr}.solo-wrap .row{grid-template-columns:repeat(3,1fr)}.solo-wrap .note{display:none}@media(max-width:700px){.solo-wrap .row{grid-template-columns:repeat(2,1fr)}.controls .mode-picker button{padding:10px 12px}}
.card{box-shadow:0 6px 0 #03050b,0 12px 22px #0007,inset 0 1px 0 #ffffff45;transform-style:preserve-3d}.card:hover{transform:perspective(900px) translateY(-5px) rotateX(2deg);box-shadow:0 10px 0 #03050b,0 18px 30px #0008}.wood{background:repeating-linear-gradient(5deg,#ffffff08 0 1px,transparent 1px 7px),linear-gradient(120deg,#f9d996,#c9954c)}.wood:before{box-shadow:inset 0 2px 6px #72502255,0 1px 0 #fff6}.art{box-shadow:inset 0 2px 2px #ffffff55,inset 0 -8px 16px #0003}.stone{box-shadow:inset 0 2px 2px #ffffff45,inset 0 -3px 3px #0008,3px 7px 7px #0007}.tic-grid span{filter:drop-shadow(2px 4px 1px #63213d);text-shadow:0 -1px 0 #fff8}.tiles span{background:linear-gradient(145deg,#eee7ff,#b39ae9);box-shadow:inset 0 1px 0 white,0 4px 0 #79629f,3px 7px 5px #0005}.reversi{background:radial-gradient(ellipse at 25% 15%,#4bc297,#187755)}
dialog{background:radial-gradient(ellipse at top left,#222d49,#101528 65%);box-shadow:0 30px 100px #000b,inset 0 1px 0 #ffffff20}#play{margin:18px auto 23px;border:9px solid #b98242;border-top-color:#f3d09a;border-left-color:#dfb273;border-radius:13px;background:repeating-linear-gradient(6deg,#ffffff0b 0 1px,transparent 1px 8px),linear-gradient(125deg,#f6d598,#d4a45f);box-shadow:0 8px 0 #6a452b,0 12px 0 #3b2a23,0 22px 26px #0008,inset 0 2px 6px #6c482d66;overflow:hidden}#play button .disc{inset:6%;background:radial-gradient(ellipse at 29% 22%,#6e7686 0%,#2c3340 24%,#10141c 65%,#04060b 95%);box-shadow:inset 0 1px 2px #c7d1e866,inset -2px -3px 3px #000c,2px 5px 5px #0008;animation:place-piece .2s ease-out}#play button .disc.white{background:radial-gradient(ellipse at 30% 22%,#fff 10%,#f0efe5 45%,#b8c0bf 85%,#8f9c9b);box-shadow:inset 0 2px 2px #fff,inset -2px -3px 3px #87929466,2px 5px 5px #0007}#play.reversi-board{border-color:#237453;border-top-color:#62ba8e;border-left-color:#449f76;background:radial-gradient(ellipse at top left,#40ac7d,#18704e);box-shadow:0 8px 0 #104630,0 12px 0 #092e23,0 22px 26px #0008,inset 0 2px 8px #00372299}#play.reversi-board button{box-shadow:inset 1px 1px 0 #ffffff1c,inset -1px -1px 0 #003b32aa}#play button.valid:after{box-shadow:0 0 7px #ffe28b88}#play.tic-board{padding:18px;gap:13px;border-color:#74435d;border-top-color:#d58ca5;border-left-color:#ad6b87;background:linear-gradient(145deg,#77465f,#352235);box-shadow:0 8px 0 #442238,0 12px 0 #2c1726,0 22px 26px #0008,inset 0 2px 8px #20112699}#play.tic-board button{background:linear-gradient(145deg,#a66b86,#683c59);border:1px solid #e8acc450;box-shadow:inset 0 2px 1px #e9b6ce55,0 5px 0 #432238,0 8px 9px #0007;text-shadow:0 2px 0 #fff6,2px 5px 0 #6a2549,3px 7px 4px #241324}#play.puzzle-board{padding:15px;gap:12px;border-color:#756095;border-top-color:#c6a9ed;border-left-color:#a18bc0;background:linear-gradient(145deg,#54456e,#282237);box-shadow:0 8px 0 #403052,0 12px 0 #282033,0 22px 26px #0008,inset 0 2px 8px #110c22aa}#play.puzzle-board button{background:linear-gradient(145deg,#e6dbff,#b299e4);border:1px solid #e7dbff;box-shadow:inset 0 2px 1px white,inset -2px -3px 3px #9879c5,0 5px 0 #785a9e,2px 8px 7px #0007;text-shadow:0 1px 0 #fff9;transition:transform .12s}#play.puzzle-board button:not(.empty):active{transform:translateY(3px);box-shadow:inset 0 2px 1px #fff,0 2px 0 #785a9e}#play.puzzle-board button.empty{background:#211a30;border:0;box-shadow:inset 2px 4px 8px #08050f99}#play button:focus-visible{outline:3px solid #ffae45;outline-offset:-3px;z-index:1}
#scoreboard{display:flex;align-items:center;gap:18px;margin-top:17px;padding:13px 16px;border:1px solid #35425b;border-radius:10px;background:linear-gradient(120deg,#1d2942,#121a2c);box-shadow:inset 0 1px 0 #ffffff0d,0 4px 12px #0003}.score-label{font-size:12px;font-weight:700;margin-right:auto}.score-label small{display:block;font-size:9px;color:#95a1bb;font-weight:400;margin-top:4px}.score-stat{text-align:center;min-width:34px;color:#b9c2d6}.score-stat strong{display:block;font-size:24px;line-height:1.3}.score-stat span{font-size:10px}.score-stat.win{color:#77e4bb}.score-stat.loss{color:#ff9ca9}#result{display:flex;gap:16px;align-items:center;padding:17px 20px;margin-top:14px;border-radius:12px;border:1px solid #4ba78588;background:linear-gradient(120deg,#1e4e43,#182d32);box-shadow:inset 0 1px 0 #ffffff20,0 5px 15px #0004;animation:place-piece .25s ease-out}#result[hidden]{display:none}#result.defeat{border-color:#b66a8188;background:linear-gradient(120deg,#573142,#2b2336)}#result.draw{border-color:#7b88a788;background:linear-gradient(120deg,#35405d,#202a40)}.result-icon{font-size:30px}#result strong{font-size:20px;color:#adf5cf}#result.defeat strong{color:#ffc3ce}#result.draw strong{color:#d9e1fa}#result p{font-size:11px;color:#c0cbd3;margin:6px 0 0}@keyframes place-piece{from{opacity:.5;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}@media(max-width:700px){#scoreboard{gap:10px;padding:12px}.score-label{font-size:11px}#play{border-width:7px}#play.tic-board{padding:12px;gap:9px}#play.puzzle-board{padding:10px;gap:8px}#result{padding:14px}#result strong{font-size:17px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* Shared wooden frame; every marker uses the same 50% origin as its grid crossing. */
#play.grid-board,#play.grid-board.go-board{
  width:min(100%,580px);
  padding:clamp(10px,2.6vw,20px);
  border:9px solid #bd8b4d;
  border-top-color:#f7d79c;
  border-left-color:#e4b875;
  border-right-color:#bc8848;
  border-bottom-color:#b47e3e;
  border-radius:14px;
  background:repeating-linear-gradient(2deg,#ffffff08 0 1px,transparent 1px 6px),linear-gradient(115deg,#f6d69a,#e9bf7c 55%,#d5a15b);
  box-shadow:inset 0 2px 4px #8f602b50,inset 2px 0 5px #ffe7b570,0 7px 0 #8c5b2e,0 12px 0 #583c29,0 22px 26px #0008;
}
#play.grid-board{aspect-ratio:1}
#play.grid-board.go-board{aspect-ratio:42 / 45}
#play.grid-board button{--line:#87663b}
#play.grid-board button.hoshi:before,
#play.grid-board.go-board button.hoshi:before{
  content:'';position:absolute;left:50%;top:50%;
  width:clamp(4px,.72vw,7px);height:auto;aspect-ratio:1;
  border-radius:50%;background:#73502b;
  transform:translate(-50%,-50%);pointer-events:none;
}
#play.grid-board button .disc,
#play.grid-board.go-board button .disc{
  inset:auto;left:50%;top:50%;width:88%;height:auto;aspect-ratio:1;
  transform:translate(-50%,-50%);animation:none;
}
@media(max-width:700px){
  #play.grid-board,#play.grid-board.go-board{padding:10px;border-width:7px;border-radius:12px}
}

#play.grid-board.janggi-board{aspect-ratio:9/10;grid-template-columns:repeat(9,1fr);grid-template-rows:repeat(10,1fr);gap:0}
#play.janggi-board .palace-line{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;stroke:#87663b;stroke-width:1.8;fill:none}
.j-piece{position:absolute;display:grid;place-items:center;left:50%;top:50%;transform:translate(-50%,-50%);width:83%;aspect-ratio:1;border-radius:30%;background:linear-gradient(145deg,#ffebbe,#e2b875);border:2px solid #c29456;box-shadow:inset 0 2px 1px #fff8,inset 0 -2px 3px #94682d66,0 3px 0 #a17035,1px 5px 5px #0007;font-family:'Noto Sans KR',serif;font-size:clamp(17px,3.5vw,31px);font-weight:800;color:#23724d;z-index:2;pointer-events:none}
.j-piece.han{color:#b62b30}.j-piece.cho{color:#245e9e}.j-piece.general{width:93%;font-size:clamp(19px,4vw,35px)}
#play.janggi-board .j-selected .j-piece{outline:3px solid #fff2a2;outline-offset:2px;box-shadow:0 0 14px #ffd452,0 4px 0 #9a7039}
#play.janggi-board .j-valid:after{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:23%;aspect-ratio:1;border-radius:50%;background:#26785dbb;z-index:3;pointer-events:none;box-shadow:0 0 0 3px #fff5}
#play.janggi-board .j-valid:has(.j-piece):after{width:94%;background:transparent;border:3px solid #ffb12b;box-shadow:none}
.j-preview{position:absolute;inset:15% 24% 30%;display:flex;align-items:center;justify-content:center;gap:16px}.j-preview .j-piece{position:relative;left:auto;top:auto;transform:rotate(-10deg);width:70px;flex-shrink:0;font-size:38px}.j-preview .cho{transform:translateY(22px) rotate(10deg)}.janggi-art:before{background-size:12.5% 11.11%}.mosaic{grid-template-columns:2fr 1fr 1fr;grid-template-rows:190px 190px 160px}.mosaic .card.big{grid-row:span 2}.mosaic .card:last-child{grid-column:span 2}.row{grid-template-columns:repeat(5,1fr)}@media(max-width:1000px){.row{grid-template-columns:repeat(3,1fr)}}@media(max-width:700px){.mosaic{grid-template-columns:1fr 1fr;grid-template-rows:260px repeat(3,155px)}.mosaic .card.big{grid-column:span 2;grid-row:span 1}.mosaic .card:last-child{grid-column:span 2}.row{grid-template-columns:repeat(2,1fr)}.j-piece{font-size:clamp(15px,4vw,27px)}}

#visit-counter{margin-top:28px;padding:21px 24px;border:1px solid #303951;border-radius:13px;background:linear-gradient(130deg,#17223b,#0e1425);box-shadow:inset 0 1px 0 #ffffff15,0 6px 16px #0003}.counter-heading{font-size:12px;font-weight:700;color:#c6cfe4}.counter-numbers{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:17px}.counter-numbers>div{text-align:center;border-right:1px solid #344059}.counter-numbers>div:last-child{border:0}.counter-numbers span{display:block;font-size:11px;color:#9aa8c6}.counter-numbers strong{display:block;font-variant-numeric:tabular-nums;font-size:26px;margin-top:5px;color:#e3e9f7}.counter-numbers .counter-today strong{color:#ffce75}.counter-note{font-size:9px;color:#7f8cab;margin:15px 0 0;text-align:center;line-height:1.8}@media(max-width:700px){#visit-counter{padding:18px 12px}.counter-numbers strong{font-size:22px}}

/* Fixed thumbnails: resizing and horizontal scrolling never stretch game art. */
#featured.mosaic,#airow.row,#solorow.row,#boardrow.row{
  display:grid;grid-template-columns:none;grid-template-rows:153px;
  grid-auto-flow:column;grid-auto-columns:160px;gap:12px;
  width:100%;min-width:0;max-width:100%;overflow-x:auto;overflow-y:hidden;
  padding:6px 2px 15px;scroll-snap-type:x proximity;scrollbar-width:thin;
  scrollbar-color:#46506d #101529;overscroll-behavior-x:contain;
}
#featured.mosaic .card,#featured.mosaic .card.big,#featured.mosaic .card:last-child,
#airow.row .card,#solorow.row .card,#boardrow.row .card{
  grid-column:auto;grid-row:auto;width:160px;min-width:160px;max-width:160px;
  height:153px;min-height:153px;max-height:153px;scroll-snap-align:start;
  transform:none;transition:filter .2s,box-shadow .2s;
}
#featured.mosaic .card:hover,#airow.row .card:hover,#solorow.row .card:hover,#boardrow.row .card:hover{transform:none;filter:brightness(1.1)}
#home,main,section,.solo-wrap{min-width:0}
#featured .big .card-info,.card-info{left:12px;right:10px;bottom:13px;align-items:end}
#featured .big .card-info strong,.card-info strong{font-size:15px}
#featured .big .card-info small,.card-info small{display:block;font-size:9px;max-width:80px;line-height:1.4}
#featured .top-label{display:none}
#featured .big .stone{width:9%}
.card .badge{font-size:8px;padding:3px 4px}
.card .j-preview{inset:15% 18% 30%;gap:7px}
.card .j-preview .j-piece{width:66px;font-size:35px}
.card .j-preview .cho{transform:translateY(22px) rotate(10deg)}
@media(max-width:700px){.section-title{gap:10px}.section-title>span{text-align:right}}

/* Reference hero composition uses fixed pixel tracks at every viewport width. */
#featured.mosaic{
  grid-template-columns:416px 206px 206px;
  grid-template-rows:190px 190px 160px;
  grid-auto-flow:row;grid-auto-columns:auto;gap:10px;
  justify-content:start;align-content:start;
  scroll-snap-type:none;padding:6px 2px 15px;
}
#featured.mosaic .card{width:206px;min-width:206px;max-width:206px;height:190px;min-height:190px;max-height:190px;grid-column:auto;grid-row:auto}
#featured.mosaic .card.big{grid-column:1;grid-row:1 / span 2;width:416px;min-width:416px;max-width:416px;height:390px;min-height:390px;max-height:390px}
#featured.mosaic .card:nth-child(2){grid-column:2;grid-row:1}
#featured.mosaic .card:nth-child(3){grid-column:3;grid-row:1}
#featured.mosaic .card:nth-child(4){grid-column:2;grid-row:2}
#featured.mosaic .card:nth-child(5){grid-column:3;grid-row:2}
#featured.mosaic .card:last-child{grid-column:1 / span 2;grid-row:3;width:632px;min-width:632px;max-width:632px;height:160px;min-height:160px;max-height:160px}
#featured .top-label{display:block;top:18px;left:20px}
#featured .card .card-info{left:16px;right:16px;bottom:15px}
#featured .big .card-info{left:23px;right:23px;bottom:23px}
#featured .big .card-info strong{font-size:29px}
#featured .big .card-info small{font-size:11px;max-width:none}
#featured .card .card-info small{max-width:none}
#featured .card .badge{font-size:8px;padding:4px 6px}
#featured .card .j-preview{inset:15% 24% 30%;gap:16px}
#featured .card .j-preview .j-piece{width:70px;font-size:38px}
#featured .card .stone{width:9%}