/* リバーシ・ロワイヤル
   assets/ に画像を置くと自動で差し替わります（無い場合はCSSの見た目で表示）
   bg.jpg / board.jpg / logo.png / stone_black.png / stone_white.png */
:root{
  --gold:#e8c46a; --gold2:#b8862f; --ink:#f6efe0; --muted:#b9b3a3;
  --panel:rgba(14,22,20,.78); --line:rgba(232,196,106,.35);
  --felt:#0f5a3f; --felt2:#0a3f2c; --danger:#c8504a;
  --cell:min(10.2vw, 66px);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:"Zen Kaku Gothic New",system-ui,sans-serif;color:var(--ink);background:#06110d;overflow-x:hidden;-webkit-tap-highlight-color:transparent}
button,input{font:inherit;color:inherit}
.bg{position:fixed;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(4,10,8,.35),rgba(4,10,8,.75)),
    url(assets/bg.jpg) center/cover no-repeat,
    radial-gradient(1200px 700px at 50% -10%,#1d6b4f 0%,transparent 60%),
    radial-gradient(900px 600px at 100% 110%,#3b2a10 0%,transparent 60%),
    #06110d;}
.bg::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.04) 1px,transparent 1px);background-size:4px 4px;pointer-events:none}

.screen{display:none;min-height:100%;padding:24px 16px}
.screen.active{display:flex}

/* ---------- ロビー ---------- */
#lobby{flex-direction:column;align-items:center;justify-content:center;gap:28px}
.logo-wrap{text-align:center}
.logo-img{max-width:min(520px,88vw);display:block;margin:0 auto 4px;filter:drop-shadow(0 10px 30px rgba(0,0,0,.6))}
.logo-img + .logo-text{display:none}
.logo-text{font-family:Cinzel,serif;line-height:.95;letter-spacing:.08em}
.logo-text span{display:block;font-size:clamp(20px,4.5vw,30px);color:var(--muted);letter-spacing:.5em;font-weight:600}
.logo-text b{display:block;font-size:clamp(46px,12vw,92px);font-weight:800;
  background:linear-gradient(180deg,#fff6d6 0%,var(--gold) 45%,var(--gold2) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 4px 0 rgba(0,0,0,.4)) drop-shadow(0 0 24px rgba(232,196,106,.25))}
.sub{margin-top:10px;color:var(--muted);letter-spacing:.3em;font-size:14px}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:22px;
  box-shadow:0 20px 60px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06);backdrop-filter:blur(10px)}
.lobby-panel{width:min(420px,100%);display:flex;flex-direction:column;gap:12px}
.field span{display:block;font-size:12px;color:var(--muted);margin-bottom:6px;letter-spacing:.1em}
input{width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--line);background:rgba(0,0,0,.35);outline:none}
input:focus{border-color:var(--gold)}
.row{display:flex;gap:10px}
.row > *{flex:1;min-width:0}
.row.join input{flex:1.4;text-align:center;letter-spacing:.3em}
.divider{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px;margin:6px 0}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}
.online{text-align:center;font-size:13px;color:var(--muted)}
.online i{display:inline-block;width:8px;height:8px;border-radius:50%;background:#4ade80;margin-right:6px;box-shadow:0 0 8px #4ade80}

.btn{cursor:pointer;border:1px solid var(--line);background:linear-gradient(180deg,#24352f,#15211d);
  padding:12px 14px;border-radius:12px;font-weight:700;transition:.15s;white-space:nowrap}
.btn:hover{border-color:var(--gold);transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn.gold{color:#2a1b02;border:none;background:linear-gradient(180deg,#ffe9a8,var(--gold) 50%,var(--gold2));
  box-shadow:0 6px 20px rgba(232,196,106,.35),inset 0 1px 0 #fff8}
.btn.big{font-size:18px;padding:16px}
.btn.ghost{background:rgba(255,255,255,.04)}
.btn.danger{border-color:rgba(200,80,74,.6);color:#ffb4ae;background:rgba(200,80,74,.12)}
.btn.small{padding:8px 12px;font-size:13px}
.btn:disabled{opacity:.4;pointer-events:none}

/* ---------- 対戦画面 ---------- */
#game{display:none;max-width:1100px;margin:0 auto;gap:18px;
  grid-template-columns:1fr 300px;grid-template-areas:"top top" "board side";align-items:start;align-content:start}
#game.active{display:grid}
.players{grid-area:top;display:flex;align-items:center;gap:12px}
.pcard{flex:1;min-width:0;display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:14px;background:var(--panel);border:1px solid transparent;transition:.25s}
.pcard.right{justify-content:flex-end;text-align:right}
.pcard.active{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 0 24px rgba(232,196,106,.35)}
body:not(.cpu-mode) .pcard.me .pname::after{content:"（あなた）";font-size:11px;color:var(--gold);margin-left:4px}
.pname{font-weight:700;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:28vw}
.pcount{font-family:Cinzel,serif;font-size:28px;font-weight:800;line-height:1}
.turn-info{text-align:center;min-width:130px;font-weight:700;font-size:14px}
.timer{height:5px;border-radius:9px;background:rgba(255,255,255,.1);margin-top:8px;overflow:hidden}
#timerBar{height:100%;width:100%;background:linear-gradient(90deg,var(--gold),#fff1c4);transform-origin:left}
#timerBar.low{background:var(--danger)}

.disc-icon{width:30px;height:30px;border-radius:50%;flex:none}
.disc-icon.black{background:url(assets/stone_black.png) center/cover,radial-gradient(circle at 35% 30%,#555,#0b0b0b 60%);box-shadow:0 2px 4px #000a}
.disc-icon.white{background:url(assets/stone_white.png) center/cover,radial-gradient(circle at 35% 30%,#fff,#d8d4cb 65%);box-shadow:0 2px 4px #000a}

.board-area{grid-area:board;position:relative;display:flex;justify-content:center}
.board-frame{padding:14px;border-radius:20px;
  background:linear-gradient(145deg,#f3d98a,#9a6a1f 30%,#e8c46a 55%,#6e4a12 80%,#d9b25a);
  box-shadow:0 30px 60px rgba(0,0,0,.6),inset 0 2px 0 rgba(255,220,150,.35),inset 0 -3px 0 rgba(0,0,0,.4)}
.board{display:grid;grid-template-columns:repeat(8,var(--cell));grid-template-rows:repeat(8,var(--cell));
  border-radius:6px;overflow:hidden;position:relative;
  background:url(assets/board.jpg) center/cover, radial-gradient(circle at 50% 40%,#16754f,var(--felt) 50%,var(--felt2));
  box-shadow:inset 0 0 40px rgba(0,0,0,.45)}
.cell{position:relative;border-right:1px solid rgba(0,0,0,.35);border-bottom:1px solid rgba(0,0,0,.35);cursor:default;perspective:400px}
.cell:nth-child(8n){border-right:none}
.cell:nth-child(n+57){border-bottom:none}
.board .dot{position:absolute;width:9px;height:9px;border-radius:50%;background:#0006;transform:translate(-50%,-50%);pointer-events:none;z-index:1}

.cell.can{cursor:pointer}
.cell.can::after{content:"";position:absolute;inset:36%;border-radius:50%;border:2px solid rgba(255,240,190,.55);background:rgba(255,240,190,.12);transition:.15s}
.board.nohint .cell.can::after{opacity:0}
.cell.can:hover::after{inset:14%;opacity:1;background:rgba(255,240,190,.25)}
.cell.last::before{content:"";position:absolute;width:8px;height:8px;border-radius:50%;background:#ff5a4e;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;box-shadow:0 0 8px #ff5a4e}

.disc{position:absolute;inset:9%;transform-style:preserve-3d;transition:transform .45s cubic-bezier(.3,1.4,.5,1)}
.disc .face{position:absolute;inset:0;border-radius:50%;backface-visibility:hidden}
.disc .b{background:url(assets/stone_black.png) center/cover, radial-gradient(circle at 35% 28%,#5c5c5c,#141414 55%,#000);
  box-shadow:0 4px 6px rgba(0,0,0,.55),inset 0 -3px 4px rgba(0,0,0,.6),inset 0 2px 2px rgba(255,255,255,.15)}
.disc .w{transform:rotateY(180deg);background:url(assets/stone_white.png) center/cover, radial-gradient(circle at 35% 28%,#fff,#efebe2 50%,#c9c3b6);
  box-shadow:0 4px 6px rgba(0,0,0,.45),inset 0 -3px 4px rgba(0,0,0,.18)}
.disc.white{transform:rotateY(180deg)}
.disc.drop{animation:drop .32s ease-out}
@keyframes drop{0%{transform:scale(1.6) translateY(-20%);opacity:0}100%{opacity:1}}
.disc.white.drop{animation:dropw .32s ease-out}
@keyframes dropw{0%{transform:rotateY(180deg) scale(1.6) translateY(-20%);opacity:0}100%{transform:rotateY(180deg);opacity:1}}

.toast{position:absolute;top:45%;left:50%;transform:translate(-50%,-50%) scale(.8);padding:12px 26px;border-radius:999px;
  background:rgba(0,0,0,.8);border:1px solid var(--gold);font-weight:900;font-size:20px;opacity:0;pointer-events:none;transition:.25s;z-index:10}
.toast.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.stamp-pop{position:absolute;top:8%;right:6%;font-size:40px;font-weight:900;opacity:0;pointer-events:none;z-index:10;
  padding:6px 16px;border-radius:16px;background:rgba(0,0,0,.6)}
.stamp-pop.show{animation:pop 2s ease forwards}
@keyframes pop{0%{opacity:0;transform:scale(.4)}12%{opacity:1;transform:scale(1.15)}20%{transform:scale(1)}80%{opacity:1}100%{opacity:0;transform:translateY(-20px)}}

.side{grid-area:side;display:flex;flex-direction:column;gap:12px}
.stamps{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.stamps button{cursor:pointer;padding:8px 4px;border-radius:10px;border:1px solid var(--line);background:rgba(0,0,0,.35);font-size:15px}
.stamps button:hover{border-color:var(--gold)}
.chat{background:var(--panel);border:1px solid var(--line);border-radius:14px;display:flex;flex-direction:column;height:280px}
.chat-log{flex:1;overflow:auto;padding:10px 12px;font-size:13px;display:flex;flex-direction:column;gap:6px}
.chat-log .sys{color:var(--muted);font-size:12px}
.chat-log b{color:var(--gold);margin-right:6px}
.chat-form{display:flex;gap:6px;padding:8px;border-top:1px solid var(--line)}
.chat-form input{padding:8px 10px}
body.cpu-mode .chat, body.cpu-mode .stamps{display:none}

/* ---------- モーダル ---------- */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.6);z-index:50;padding:16px;backdrop-filter:blur(3px)}
.modal.show{display:flex}
.center{text-align:center;display:flex;flex-direction:column;gap:16px;align-items:center;min-width:min(360px,100%)}
.code{font-family:Cinzel,serif;font-size:44px;letter-spacing:.3em;color:var(--gold)}
.code:empty{display:none}
.spinner{display:flex;gap:8px}
.spinner .disc-icon{width:36px;height:36px;animation:spin 1.2s infinite ease-in-out}
.spinner .white{animation-delay:.6s}
@keyframes spin{50%{transform:rotateY(180deg) translateY(-8px)}}
.banner{font-family:Cinzel,serif;font-size:64px;font-weight:800;letter-spacing:.1em;
  background:linear-gradient(180deg,#fff6d6,var(--gold) 50%,var(--gold2));-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:bannerIn .6s cubic-bezier(.2,1.6,.4,1)}
.banner.lose{background:linear-gradient(180deg,#e9eef5,#8796aa);-webkit-background-clip:text;background-clip:text}
@keyframes bannerIn{from{transform:scale(2);opacity:0}}
.score{font-family:Cinzel,serif;font-size:28px}
.note{color:var(--muted);font-size:13px;min-height:1em}
.result .row{width:100%}

/* ---------- スマホ ---------- */
@media (max-width:860px){
  #game{width:100%;grid-template-columns:minmax(0,1fr);grid-template-areas:"top" "board" "side";padding:12px 10px;gap:12px}
  .board-frame{padding:8px;border-radius:14px}
  :root{--cell:min(11.2vw,62px)}
  .chat{height:180px}
  .pcard{padding:8px 10px;gap:8px}
  .pcount{font-size:22px}
  .disc-icon{width:24px;height:24px}
  .turn-info{min-width:76px;font-size:12px}
  .pname{font-size:12px}
  .players{gap:6px}
}

/* CPUボタン：スマホではみ出さないように */
.row.cpu{gap:8px}
.row.cpu .btn{padding:12px 4px;font-size:15px;overflow:hidden;text-overflow:ellipsis}
@media (max-width:480px){.row.cpu .btn{font-size:13px;padding:11px 2px}}
/* 対戦画面のアバター */
.pavw{position:relative;flex:none;width:52px;height:52px}
.pav{width:100%;height:100%;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 50% 35%,#2c4a40,#0f1a17);border:2px solid var(--line);display:grid;place-items:center;font-size:24px}
.pav svg{width:100%;height:100%;display:block}
.pcard.active .pav{border-color:var(--gold)}
.pavw .disc-icon{position:absolute;right:-4px;bottom:-4px;width:22px;height:22px;border:2px solid #0b120f}
.pcard.right .pavw .disc-icon{right:auto;left:-4px}
@media (max-width:860px){.pavw{width:40px;height:40px}.pav{font-size:19px}.pavw .disc-icon{width:18px;height:18px}}
html[data-lang=en] body:not(.cpu-mode) .pcard.me .pname::after{content:" (You)"}
html[data-lang=th] body:not(.cpu-mode) .pcard.me .pname::after{content:" (คุณ)"}