/* Flip Bots, a Reversi game (GOC). Brushed-steel frame, copper bevel, green enamel board, metal robot discs.
   One key light from the upper left everywhere. No blinking, no shake: the only loops are slow fades/rotations (< 1 Hz),
   and Calm / reduced motion stops them (gk.css). */
.fb{--cu1:#ffd2ad;--cu2:#d07a3e;--cu3:#6e3214;--gold2:#ffe2a8}
.fb .fb-bg{background:radial-gradient(120% 90% at 50% 0%,rgba(30,40,46,.35),rgba(4,8,10,.92) 70%),#05090b url(../img/table/room-wide.webp) center top/cover}
/* ---------- discs (shared skins) ---------- */
.s-cu,.s-st,.s-tommy,.s-pinky,.s-dj,.s-blk,.s-wht{border-radius:50%;position:relative}
.s-cu{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%233a1606' stroke-opacity='.42'%3E%3Ccircle cx='50' cy='50' r='29' stroke-width='11' stroke-dasharray='9.1 6.1'/%3E%3Ccircle cx='50' cy='50' r='21' stroke-width='6'/%3E%3C/g%3E%3Ccircle cx='50' cy='50' r='7' fill='%233a1606' fill-opacity='.38'/%3E%3C/svg%3E") center/64% no-repeat,radial-gradient(circle at 36% 28%,#ffe3c9 0,#f0a46a 18%,#c8682c 48%,#7a3715 78%,#4a1d08)}
.s-st{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23192028' stroke-opacity='.4'%3E%3Ccircle cx='50' cy='50' r='29' stroke-width='11' stroke-dasharray='9.1 6.1'/%3E%3Ccircle cx='50' cy='50' r='21' stroke-width='6'/%3E%3C/g%3E%3Ccircle cx='50' cy='50' r='7' fill='%23192028' fill-opacity='.36'/%3E%3C/svg%3E") center/64% no-repeat,radial-gradient(circle at 36% 28%,#ffffff 0,#dfe5ec 18%,#a3adb9 48%,#5d6772 78%,#353c45)}
.s-tommy{background:radial-gradient(circle at 36% 28%,#b8cbff 0,#5c7fdc 20%,#2c4ba6 50%,#162a66 80%,#0b1638)}
.s-pinky{background:radial-gradient(circle at 36% 28%,#ffe1ec 0,#f39cc0 20%,#d45a8f 50%,#8f2a5a 80%,#521232)}
.s-dj{background:radial-gradient(circle at 36% 28%,#e6d4ff 0,#a77cf0 20%,#6c41c4 50%,#3b1d7e 80%,#1f0c47)}
.s-blk{background:radial-gradient(circle at 36% 28%,#7b7f88 0,#34373e 30%,#15161a 70%,#050506)}
.s-wht{background:radial-gradient(circle at 36% 28%,#fff 0,#f2f2f4 35%,#c9cad1 75%,#9a9ba5)}
.s-tommy::before,.s-pinky::before,.s-dj::before{content:"";position:absolute;left:17%;right:17%;top:31%;bottom:31%;border-radius:22%/40%;
  background:#0c1220 center/104% auto no-repeat;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35),inset 0 2px 4px rgba(0,0,0,.7)}
.s-tommy::before{background-image:url(img/eyes-tommy.webp)}
.s-pinky::before{background-image:url(img/eyes-pinky.webp)}
.s-dj::before{background-image:url(img/eyes-dj.webp)}
/* ---------- title ---------- */
.fb-hero{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;height:min(26vw,116px);max-height:17vh}
.fb-hero .hd{position:relative;width:min(22vw,96px);aspect-ratio:1;border-radius:50%;box-shadow:inset 0 0 0 3px rgba(255,255,255,.45),inset 0 -6px 10px rgba(0,0,0,.35),0 10px 18px rgba(0,0,0,.65)}
.fb-hero .s-cu{transform:rotate(-8deg) translateY(6px)}.fb-hero .s-dj{transform:rotate(8deg) translateY(6px)}
.fb-hero .mid{width:min(25vw,108px);perspective:600px;box-shadow:none}
.fb-hero .mid i{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:inset 0 0 0 3px rgba(255,255,255,.45),inset 0 -6px 10px rgba(0,0,0,.35),0 10px 18px rgba(0,0,0,.65);animation:fbHero 7s cubic-bezier(.45,0,.2,1) infinite}
.fb-hero .mid .f2{animation-name:fbHero2}
@keyframes fbHero{0%,40%{transform:rotateY(0)}55%,90%{transform:rotateY(180deg)}100%{transform:rotateY(360deg)}}
@keyframes fbHero2{0%,40%{transform:rotateY(180deg)}55%,90%{transform:rotateY(360deg)}100%{transform:rotateY(540deg)}}
.fb-logo{letter-spacing:.02em;background:linear-gradient(180deg,#fff3d6 0,#ffd08a 40%,#d07a3e 72%,#8a4a1e);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 0 #2a1306) drop-shadow(0 8px 14px rgba(0,0,0,.6))}
.fb-sub{margin:-2px 0 4px;font-size:20px;font-weight:700;font-style:italic;color:#e9dcc3;letter-spacing:.04em}
.fb .gk-panel{background:linear-gradient(180deg,rgba(38,44,50,.94),rgba(16,19,23,.95));border-color:rgba(214,138,82,.55)}
.fb .gk-panel .lbl,.fb .opps-line,.fb .rec,.fb .invite,.fb .gk-seg button,.fb .gk-card p,.fb .gk-card li,.fb .gk-set span,.fb .gk-set label{font-size:18px}
.fb .gk-set small{font-size:16px}
.fb-mode{display:grid!important;grid-template-columns:1fr 1fr;gap:8px}
.fb-mode button{min-height:56px;display:flex;align-items:center;justify-content:center;gap:8px}
.fb-mode .mf{width:34px;height:34px;flex:none;box-shadow:inset 0 0 0 2px rgba(255,255,255,.5),0 2px 4px rgba(0,0,0,.5)}
.fb-mode .mf.two{background:none;box-shadow:none;width:44px;position:relative}
.fb-mode .mf.two i{position:absolute;top:3px;width:28px;height:28px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.5),0 2px 4px rgba(0,0,0,.5)}
.fb-mode .mf.two .s-cu{left:0}.fb-mode .mf.two .s-st{right:0}
.fb .gk-btn,.fb .gk-seg button{min-height:48px}
.fb .gk-btn.icon{min-width:48px}
/* ---------- game ---------- */
.fb-wrap{flex:1;min-height:0;display:grid;grid-template-rows:auto auto auto auto;align-content:center;justify-items:center;gap:10px;padding-bottom:6px}
.fb-board-w{min-height:0;width:100%;display:flex;align-items:center;justify-content:center}
.fb-frame{--bs:min(96vw,calc(100dvh - 290px),660px);position:relative;width:var(--bs);height:var(--bs);padding:calc(var(--bs)*.034);border-radius:calc(var(--bs)*.05);box-sizing:border-box;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.045) 0 1px,transparent 1px 3px),linear-gradient(160deg,#6c747e 0,#3a4047 30%,#262a2f 55%,#4a5058 78%,#1d2125);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -2px 0 rgba(0,0,0,.6),0 0 0 2px #121417,0 22px 44px rgba(0,0,0,.75)}
.fb-frame .rv{position:absolute;width:calc(var(--bs)*.026);height:calc(var(--bs)*.026);border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe3c2,#c4733a 55%,#5a2a0e);box-shadow:0 1px 2px rgba(0,0,0,.7)}
.fb-frame .r1{left:calc(var(--bs)*.008);top:calc(var(--bs)*.008)}.fb-frame .r2{right:calc(var(--bs)*.008);top:calc(var(--bs)*.008)}
.fb-frame .r3{left:calc(var(--bs)*.008);bottom:calc(var(--bs)*.008)}.fb-frame .r4{right:calc(var(--bs)*.008);bottom:calc(var(--bs)*.008)}
.fb-board{width:100%;height:100%;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);gap:calc(var(--bs)*.006);padding:calc(var(--bs)*.008);box-sizing:border-box;border-radius:calc(var(--bs)*.022);
  background:linear-gradient(180deg,#0a1a14,#06120d);box-shadow:0 0 0 calc(var(--bs)*.007) #c8743a,0 0 0 calc(var(--bs)*.011) #4a220b,inset 0 0 calc(var(--bs)*.04) rgba(0,0,0,.8)}
.cell{position:relative;border:0;padding:0;border-radius:calc(var(--bs)*.012);cursor:pointer;perspective:500px;
  background:radial-gradient(130% 120% at 28% 18%,#2a7a5e 0,#185a43 45%,#0f3d2d 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -2px 4px rgba(0,0,0,.4)}
.cell:hover{background:radial-gradient(130% 120% at 28% 18%,#33896b 0,#1d6a4f 45%,#124834 100%)}
.cell:focus-visible{outline:3px solid #ffd08a;outline-offset:1px;z-index:3}
.cell.hint::after{content:"";position:absolute;left:50%;top:50%;width:30%;height:30%;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#ffe7cc,#f0a060 55%,#a8521f);box-shadow:0 0 0 2px rgba(20,8,2,.55),0 0 10px rgba(255,190,120,.6);opacity:.95;animation:fbHint 2.6s ease-in-out infinite}
@keyframes fbHint{50%{opacity:.55}}
.cell.last::before{content:"";position:absolute;inset:6%;border-radius:calc(var(--bs)*.01);box-shadow:inset 0 0 0 calc(var(--bs)*.005) #ffcf8f;pointer-events:none;z-index:2}
.cell.nope::before{content:"";position:absolute;inset:6%;border-radius:calc(var(--bs)*.01);box-shadow:inset 0 0 0 calc(var(--bs)*.006) #ff7a6a;pointer-events:none}
.dk{position:absolute;inset:7%;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.3,.75,.25,1.12)}
.dk.flip2{transform:rotateY(180deg)}
.dk i{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  box-shadow:inset 0 0 0 calc(var(--bs)*.0045) rgba(255,255,255,.5),inset 0 calc(var(--bs)*-.006) calc(var(--bs)*.01) rgba(0,0,0,.35),0 calc(var(--bs)*.007) calc(var(--bs)*.01) rgba(0,0,0,.65)}
.dk .b{transform:rotateY(180deg)}
.dk.drop{animation:fbDrop .34s cubic-bezier(.2,1.25,.45,1)}
@keyframes fbDrop{from{transform:scale(1.25) translateY(-14%);opacity:0}}
.dk.flip2.drop{animation-name:fbDrop2}
@keyframes fbDrop2{from{transform:rotateY(180deg) scale(1.25) translateY(-14%);opacity:0}}
body.calm .dk{transition:none}
.fb-pl{width:min(96vw,660px);box-sizing:border-box;display:flex;align-items:center;gap:12px;padding:6px 14px;border-radius:16px;background:linear-gradient(180deg,rgba(40,45,52,.9),rgba(16,18,22,.92));border:2px solid rgba(214,138,82,.3)}
.fb-pl.turn{border-color:#ffc27e;box-shadow:0 0 0 3px rgba(255,180,110,.18)}
.fb-pl .pd{width:42px;height:42px;flex:none;box-shadow:inset 0 0 0 2px rgba(255,255,255,.45),0 2px 5px rgba(0,0,0,.6)}
.fb-pl .who{flex:1;min-width:0;font-weight:700;font-size:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff3df}
.fb-pl .who small{display:block;font-size:18px;color:#d9c7a8;font-weight:700}
.fb-pl.think .who small{animation:fbThink 2.4s ease-in-out infinite}
@keyframes fbThink{50%{opacity:.55}}
.fb-pl .n{font-size:30px;font-weight:800;color:var(--gold2);font-variant-numeric:tabular-nums;min-width:2ch;text-align:right}
.fb-msg{margin:0;min-height:24px;text-align:center;font-weight:700;font-size:18px;color:#fff4dc;text-shadow:0 2px 4px #000;padding:0 10px}
@media (orientation:landscape) and (max-height:560px){
  .fb-wrap{grid-template-columns:1fr auto 1fr;grid-template-rows:1fr auto;align-items:center;column-gap:12px;padding:0 8px}
  .fb-board-w{grid-column:2;grid-row:1/3}
  .fb-frame{--bs:min(calc(100dvh - 104px),58vw)}
  #plTop{grid-column:1;grid-row:1;width:100%;flex-direction:column;text-align:center;gap:4px;padding:8px}
  #plBot{grid-column:3;grid-row:1;width:100%;flex-direction:column;text-align:center;gap:4px;padding:8px}
  .fb-pl .who{white-space:normal}
  .fb-msg{grid-column:1/2;grid-row:2;font-size:18px}
}
@media (min-width:900px) and (min-height:640px){ .fb-frame{--bs:min(calc(100dvh - 280px),620px)} }
.cell:disabled{cursor:default}
.fb-final{display:flex;align-items:center;justify-content:center;gap:12px;margin:6px 0 4px}
.fb-final b{font-size:40px;color:var(--gold2)}.fb-final .vs{color:#d9c7a8;font-weight:700;font-size:18px}
.fb-final .pd{width:52px;height:52px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.45),0 3px 6px rgba(0,0,0,.6)}
.fb-trophy{display:block;width:96px;height:96px;margin:0 auto 6px;box-shadow:inset 0 0 0 4px rgba(255,255,255,.45),0 0 0 6px rgba(255,190,120,.18),0 10px 24px rgba(0,0,0,.6)}
.fb .gk-card{background:linear-gradient(180deg,#30363d,#15181c);border-color:rgba(214,138,82,.55)}
/* 5% re-check fixes (title panel): invite pill text 18px, skill -/+ taps 48px */
.fb .soon{font-size:18px;padding:6px 12px}
.fb .lvrow .gk-btn.icon{min-width:48px;min-height:48px}
.fb .lvw{font-size:18px}
.fb .gk-btn:not(.icon){font-size:max(18px,1em)}
/* re-check: hide the header title on narrow phones (it was cut off; the opponent name is in the player bar) */
@media (max-width:440px){ .fb #gTtl{display:none} }
/* re-check: phone landscape puts the board on the left at full height (cells 30px -> ~38px), buttons + players on the right */
@media (orientation:landscape) and (max-height:560px){
  .fb #sGame{position:relative}
  .fb #sGame>.gk-bar{position:absolute;left:0;right:0;top:0;z-index:3;pointer-events:none;background:none;border:0;box-shadow:none}
  .fb #sGame>.gk-bar>*{pointer-events:auto}
  .fb-wrap{grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto 1fr;align-items:start;align-content:stretch;justify-items:stretch;column-gap:12px;row-gap:8px;padding:6px 10px 0 70px}
  .fb-board-w{grid-column:1;grid-row:1/4;align-self:center}
  .fb-frame{--bs:min(calc(100dvh - 46px),calc(100vw - 310px))}
  #plTop{grid-column:2;grid-row:1;margin-top:58px;flex-direction:row;flex-wrap:wrap;text-align:left;gap:0 10px;padding:6px 10px}
  #plBot{grid-column:2;grid-row:2;flex-direction:row;flex-wrap:wrap;text-align:left;gap:0 10px;padding:6px 10px}
  .fb-msg{grid-column:2;grid-row:3}
}
@media (orientation:landscape) and (max-height:560px){
  .fb-pl .who{white-space:nowrap;overflow:visible}
  .fb-pl .who small{white-space:normal}
  .fb-pl .n{font-size:24px}
}
/* ---------- canonical robot faces in the seats (Tommy: approved straight-mouth royal art, Nov 10 t8856u) ---------- */
.face{position:relative;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 50% 30%,#3d4c60,#131a24 75%)!important;box-shadow:inset 0 0 0 2px rgba(255,214,160,.55),0 2px 6px rgba(0,0,0,.6)!important}
.face::before{content:none!important}
.face::after{content:"";position:absolute;inset:2%;background:center 30%/100% auto no-repeat}
.f-tommy::after{background-image:url(img/face-tommy.webp)}
.f-pinky::after{background-image:url(img/face-pinky.webp)}
.f-dj::after{inset:0;background-image:url(img/face-dj.webp);background-size:cover;background-position:center}
.fb-pl .pd.face{width:52px;height:52px}
.fb-mode .mf.face{width:40px;height:40px}
/* ---------- settings sheet: 18px labels, 48px controls ---------- */
.fb .gk-set{font-size:18px}.fb .gk-set small{font-size:18px}
.fb .gk-set .ca-vol{-webkit-appearance:none;appearance:none;flex:1 1 160px;min-width:140px;height:48px;background:transparent;cursor:pointer}
.fb .gk-set.vol{flex-wrap:wrap}
.fb .gk-sw{min-width:64px;min-height:48px}
.fb .gk-set .gk-seg{display:flex;gap:6px}.fb .gk-set .gk-seg button{min-height:48px;min-width:88px;font-size:18px}
/* ---------- board size: Large ---------- */
body.fb-large .fb-wrap{gap:6px}
body.fb-large .fb-frame{--bs:min(100vw,calc(100dvh - 230px));padding:0;border-radius:0;box-shadow:none;background:none}
body.fb-large .fb-frame .rv{display:none}
body.fb-large .fb-board{gap:1px;padding:0;border-radius:0;box-shadow:none}
body.fb-large .fb-pl{width:min(100vw,640px);min-height:48px;padding:2px 12px;border-radius:12px;gap:10px}
body.fb-large .fb-pl .who small{display:none}
body.fb-large .fb-pl .pd{width:36px;height:36px}
body.fb-large .fb-pl .n{font-size:24px}
@media (orientation:landscape) and (max-height:560px){
  body.fb-large .fb-frame{--bs:min(calc(100dvh - 36px),calc(100vw - 300px))}
  body.fb-large .fb-wrap{padding-top:2px}
  body.fb-large .fb-pl .who small{display:block}
}
@media (min-width:700px) and (min-height:600px){
  body.fb-large .fb-frame{--bs:min(calc(100dvh - 200px),92vw,1100px);padding:calc(var(--bs)*.02);border-radius:calc(var(--bs)*.03)}
  body.fb-large .fb-board{gap:calc(var(--bs)*.004)}
}
/* Large on phones: break out of the screen's side padding so the board runs edge to edge */
@media (max-width:699px){
  body.fb-large #sGame .fb-wrap{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);width:100vw}
  body.fb-large .fb-pl{width:calc(100vw - 12px)}
}
.fb .lvr{min-height:48px;height:48px}
/* phone landscape title: one roomy column for the settings panel so no button text is clipped and the skill slider keeps its width */
@media (orientation:landscape) and (max-height:560px){
  .fb .gk-title .gk-brand{flex:0 0 31%;min-width:0;overflow:hidden}
  .fb .fb-hero{zoom:.62}
  .fb .gk-title .gk-panel.wide{display:block;flex:1 1 0;max-width:none}
  .fb .fb-mode{grid-template-columns:1fr 1fr}
}
/* Music / Effects sliders: visible track + thumb (same look as the kit's volume slider), 48px tall */
.ca-vol::-webkit-slider-runnable-track{height:8px;border-radius:999px;background:linear-gradient(90deg,#8a4ff0,#f5c542)}
.ca-vol::-moz-range-track{height:8px;border-radius:999px;background:linear-gradient(90deg,#8a4ff0,#f5c542)}
.ca-vol::-webkit-slider-thumb{-webkit-appearance:none;width:32px;height:32px;margin-top:-12px;border-radius:50%;background:#fff4dc;border:3px solid #f5c542;box-shadow:0 2px 6px rgba(0,0,0,.5)}
.ca-vol::-moz-range-thumb{width:28px;height:28px;border-radius:50%;background:#fff4dc;border:3px solid #f5c542}
.ca-vol:focus-visible{outline:3px solid #8fd3ff;outline-offset:2px;border-radius:10px}
.fb .lvrow input[type=number],.fb #lvN{min-height:48px;height:48px;box-sizing:border-box}