.fr { max-width: 640px; margin: 0 auto; padding: 8px 6px 14px; color: #dfe9ff; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; position: relative; }
.fr [hidden] { display: none !important; }
/* controls */
.fr-top { display: flex; justify-content: center; align-items: center; gap: 8px 10px; flex-wrap: wrap; margin: 0 0 10px; }
.fr-opts { display: flex; gap: 6px 10px; flex-wrap: wrap; font-size: 13px; color: #8aa3c4; }
.fr-opts label { display: inline-flex; align-items: center; gap: 4px; }
.fr-opts select { background: #0b1328; color: #dfe9ff; border: 1px solid #1c2b4a; border-radius: 8px; padding: 0 8px; min-height: 36px; font-size: 13.5px; touch-action: manipulation; }
.fr-opts select:focus-visible { outline: 2px solid #55d6ff; outline-offset: 1px; }
.fr-tools { display: flex; gap: 6px; }
.fr-btn { white-space: nowrap; background: #0b1328; color: #dfe9ff; border: 1px solid #1c2b4a; border-radius: 10px; padding: 0 14px; min-height: 40px; font-weight: 700; font-size: 13.5px; cursor: pointer; touch-action: manipulation; transition: border-color .15s, background-color .15s, transform .08s; }
@media (hover: hover) { .fr-btn:hover:not(:disabled) { border-color: #55d6ff; } }
.fr-btn:disabled { opacity: 0.4; cursor: default; }
.fr-btn:active:not(:disabled) { transform: translateY(1px); }
.fr-btn:focus-visible { outline: 2px solid #55d6ff; outline-offset: 2px; }
.fr-btn-primary { background: #ffd166; color: #1a1200; border-color: #ffd166; }
@media (hover: hover) { .fr-btn-primary:hover:not(:disabled) { background: #ffe08a; border-color: #ffe08a; } }
/* scoreboard + status */
.fr-hud { margin: 0 auto 8px; max-width: 520px; }
.fr-score { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; background: #0b1328; border: 1px solid #1c2b4a; border-radius: 12px; padding: 6px 12px; }
.fr-who { display: flex; align-items: center; gap: 8px; min-width: 0; color: #8aa3c4; font-size: 14px; font-weight: 700; transition: color .2s; }
.fr-who-y { justify-content: flex-end; }
.fr-who .fr-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-who b, .fr-draws b { font-size: 20px; color: #dfe9ff; font-variant-numeric: tabular-nums; min-width: 1ch; text-align: center; }
.fr-who.turn, .fr-who.won { color: #fff; }
.fr-chip { width: 22px; height: 22px; border-radius: 50%; flex: none; position: relative; transition: box-shadow .25s, transform .25s; }
.fr-chip.fr-r { background: radial-gradient(circle at 35% 30%, #ff8a95 0 18%, #ef3347 45%, #b3172c 100%); }
.fr-chip.fr-y { background: radial-gradient(circle at 35% 30%, #fff1a8 0 18%, #ffcc2e 45%, #d29a00 100%); }
.fr-who.turn .fr-chip { box-shadow: 0 0 0 2px #04060f, 0 0 0 4px #55d6ff, 0 0 14px rgba(85,214,255,.55); }
.fr-who.won .fr-chip { box-shadow: 0 0 0 2px #04060f, 0 0 0 4px #ffd166, 0 0 16px rgba(255,209,102,.6); }
.fr-draws { display: flex; flex-direction: column; align-items: center; line-height: 1.05; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: #8aa3c4; }
.fr-draws b { font-size: 16px; }
.fr-status { text-align: center; font-weight: 700; font-size: 15px; color: #fff; min-height: 24px; margin: 6px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-dots { display: inline-flex; gap: 3px; margin-left: 6px; vertical-align: middle; }
.fr-dots i { width: 5px; height: 5px; border-radius: 50%; background: #55d6ff; animation: fr-dot 1s infinite ease-in-out; }
.fr-dots i:nth-child(2) { animation-delay: .15s; } .fr-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes fr-dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

/* play area: the aiming strip (one cell tall) above the board; together a square */
.fr-play { width: min(100%, 520px); margin: 0 auto; position: relative; container-type: inline-size; touch-action: none; outline: none; cursor: pointer; }
.fr-strip { position: relative; aspect-ratio: 7.4 / 1; }
.fr-ghost, .fr-hintmark { position: absolute; top: 0; left: 2.7027%; width: 13.5135%; height: 100%; transform: translateX(calc(var(--c, 3) * 100%)); pointer-events: none; }
.fr-ghost { opacity: 0; transition: transform .12s ease-out, opacity .15s; }
.fr-ghost.on { opacity: .92; }
.fr-ghost.idle { opacity: .28; }
.fr-ghost.think .fr-disc { animation: fr-sway 1.1s ease-in-out infinite alternate; }
@keyframes fr-sway { from { transform: translateX(-22%); } to { transform: translateX(22%); } }
.fr-ghost .fr-disc { inset: 7%; }
.fr-hintmark::before { content: ''; position: absolute; left: 30%; right: 30%; top: 22%; bottom: 18%; background: #ffd166; clip-path: polygon(0 0, 100% 0, 50% 100%); filter: drop-shadow(0 0 6px rgba(255,209,102,.8)); animation: fr-bob .8s ease-in-out infinite alternate; }
.fr-ghost.on ~ .fr-hintmark { opacity: .35; }
@keyframes fr-bob { to { transform: translateY(18%); } }
.fr-board { position: relative; aspect-ratio: 740 / 640; border-radius: 3.8cqw; background: radial-gradient(ellipse at 50% 35%, #12214a, #070d22 75%); }
.fr-grid { position: absolute; left: 2.7027%; right: 2.7027%; top: 3.125%; bottom: 3.125%; z-index: 1; }
.fr-frame, .fr-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; display: block; }
.fr-frame { z-index: 2; filter: drop-shadow(0 1.2cqw 2cqw rgba(0,0,0,.55)); }
.fr-fx { z-index: 3; overflow: visible; }
.fr-cols { position: absolute; left: 2.7027%; right: 2.7027%; top: 0; bottom: 0; z-index: 4; display: grid; grid-template-columns: repeat(7, 1fr); }
.fr-col { appearance: none; -webkit-appearance: none; background: transparent; border: 0; padding: 0; margin: 0; border-radius: 3cqw; cursor: pointer; touch-action: none; transition: background-color .15s; }
.fr-col.aim { background: linear-gradient(rgba(85,214,255,.12), rgba(85,214,255,.04)); }
.fr-col.hint { background: linear-gradient(rgba(255,209,102,.18), rgba(255,209,102,.05)); box-shadow: inset 0 0 0 2px rgba(255,209,102,.55); }
.fr-col:focus { outline: none; }
.fr-col:focus-visible { box-shadow: inset 0 0 0 3px #55d6ff; }
.fr-col[aria-disabled="true"] { cursor: default; }

/* discs: a glossy face with a raised ring, slightly larger than the hole so the rim tucks under the frame */
.fr-d { position: absolute; width: 14.2857%; height: 16.6667%; pointer-events: none; will-change: transform; }
.fr-disc { position: absolute; inset: 6%; border-radius: 50%; transition: filter .4s, opacity .4s; }
.fr-r .fr-disc { background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.7) 0, rgba(255,255,255,0) 20%),
    radial-gradient(circle, #f23a4d 0 47%, #b9172d 49% 54%, #ff6d7c 56% 60%, #e22a3f 62% 84%, #a3132a 88% 100%);
  box-shadow: inset 0 -0.8cqw 1.2cqw rgba(70,0,12,.5), inset 0 0.5cqw 0.8cqw rgba(255,255,255,.25); }
.fr-y .fr-disc { background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.8) 0, rgba(255,255,255,0) 20%),
    radial-gradient(circle, #ffd43a 0 47%, #d59d00 49% 54%, #ffe98a 56% 60%, #f7c21a 62% 84%, #c48a00 88% 100%);
  box-shadow: inset 0 -0.8cqw 1.2cqw rgba(90,55,0,.45), inset 0 0.5cqw 0.8cqw rgba(255,255,255,.3); }
.fr-d.last .fr-disc::after { content: ''; position: absolute; inset: 41%; border-radius: 50%; background: rgba(255,255,255,.85); box-shadow: 0 0 0 0.4cqw rgba(0,0,0,.18); }
.fr-d.win .fr-disc { animation: fr-glow 1.1s ease-in-out .5s infinite alternate; }
@keyframes fr-glow { to { filter: brightness(1.28) saturate(1.15); } }
.fr-d.dim .fr-disc { filter: brightness(.5) saturate(.7); }
/* winning line */
.fr-wl, .fr-wl-glow { fill: none; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.fr-wl { stroke: #fff; stroke-width: 11; }
.fr-wl-glow { stroke: #55d6ff; stroke-width: 26; stroke-opacity: .45; filter: blur(4px); }
.fr-fx.fr-anim .fr-wl, .fr-fx.fr-anim .fr-wl-glow { animation: fr-line .55s cubic-bezier(.3,.7,.3,1) both; }
@keyframes fr-line { from { stroke-dashoffset: 1; } }

/* dialog and toast */
.fr-overlay { position: fixed; inset: 0; background: rgba(2,5,14,0.78); display: flex; align-items: center; justify-content: center; z-index: 1100; padding: 16px; }
.fr-overlay:not([hidden]) .fr-dialog { animation: fr-pop .2s ease-out; }
@keyframes fr-pop { from { transform: scale(.94); opacity: 0; } }
.fr-dialog { background: #0b1328; border: 1px solid #244b6b; border-radius: 14px; padding: 22px 20px 20px; width: min(100%, 380px); text-align: center; }
.fr-dialog h3 { margin: 6px 0 4px; color: #fff; font-size: 24px; }
.fr-dialog p { margin: 0 0 6px; color: #8aa3c4; }
.fr-dialog .fr-dlg-score { font-size: 13px; margin: 0 0 16px; color: #dfe9ff; }
.fr-dlg-disc { position: relative; width: 56px; height: 56px; margin: 0 auto; }
.fr-dlg-disc .fr-disc { inset: 0; }
.fr-dlg-disc.fr-draw .fr-half-r { background: radial-gradient(circle, #f23a4d 0 60%, #a3132a 100%); clip-path: inset(0 50% 0 0); }
.fr-dlg-disc.fr-draw .fr-half-y { background: radial-gradient(circle, #ffd43a 0 60%, #c48a00 100%); clip-path: inset(0 0 0 50%); }
.fr-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.fr-toast { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); background: #142347; color: #fff; border: 1px solid #2a4170; border-radius: 999px; padding: 8px 16px; font-size: 13.5px; font-weight: 600; z-index: 20; box-shadow: 0 6px 20px rgba(0,0,0,.4); white-space: nowrap; pointer-events: none; }

@media (max-width: 520px) {
  .fr { padding: 6px 2px 12px; }
  .fr-top { justify-content: center; }
  .fr-opts { justify-content: center; font-size: 12px; }
  .fr-opts select { font-size: 13px; padding: 0 6px; }
  .fr-tools { width: 100%; } .fr-tools .fr-btn { flex: 1 1 0; }
}

/* full screen (.fr-fit, set by game.js inside the site's immersive stage): no scrolling, play area sized to fit */
.fr.fr-fit { max-width: none; height: 100%; margin: 0; padding: 6px 4px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.fr-fit .fr-panel { flex: none; margin-bottom: 6px; }
.fr-fit .fr-top { margin-bottom: 6px; justify-content: center; }
.fr-fit .fr-hud { margin-bottom: 0; }
.fr-fit .fr-play { width: var(--fr-bw); flex: none; }
.fr-port .fr-hud { width: min(100%, var(--fr-bw)); max-width: none; }
/* landscape: play area on the left, a 272px control column beside it */
.fr.fr-land { display: grid; grid-template-columns: var(--fr-bw) 272px; column-gap: 16px; align-content: center; justify-content: center; padding: 6px; }
.fr-land .fr-play { grid-column: 1; grid-row: 1; margin: 0; }
.fr-land .fr-panel { grid-column: 2; grid-row: 1; align-self: center; margin: 0; }
.fr-land .fr-top { flex-direction: column; align-items: stretch; margin: 0 0 10px; }
.fr-land .fr-opts { flex-direction: column; gap: 6px; font-size: 13px; }
.fr-land .fr-opts label { display: flex; justify-content: space-between; gap: 8px; }
.fr-land .fr-opts select { width: 62%; }
.fr-land .fr-tools { width: auto; } .fr-land .fr-tools .fr-btn { flex: 1 1 0; padding: 0 8px; }
.fr-land .fr-hud { max-width: none; }
.fr-land .fr-score { padding: 6px 8px; gap: 4px; }
.fr-land .fr-who { font-size: 12.5px; gap: 5px; }
.fr-land .fr-chip { width: 18px; height: 18px; }
.fr-land .fr-who b { font-size: 18px; }
.fr-land .fr-status { white-space: normal; min-height: 44px; display: flex; align-items: center; justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  .fr-ghost, .fr-col, .fr-chip, .fr-disc, .fr-btn { transition: none; }
  .fr-ghost.think .fr-disc, .fr-hintmark::before, .fr-d.win .fr-disc, .fr-dots i, .fr-overlay:not([hidden]) .fr-dialog { animation: none; }
  .fr-d.win .fr-disc { filter: brightness(1.2); }
}

/* phones: the three options sit in tidy labelled columns */
@media (max-width: 520px) {
  .fr-opts { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: 100%; gap: 8px; }
  .fr-opts label { flex-direction: column; align-items: stretch; gap: 3px; min-width: 0; font-size: 11.5px; font-weight: 600; letter-spacing: .02em; }
  .fr-opts select { width: 100%; min-width: 0; }
}
/* touch screens: every control is at least 40px tall */
@media (pointer: coarse) { .fr-opts select { min-height: 40px; } }