.tt-wrap{ max-width:520px; margin:0 auto; padding:14px 16px 60px; text-align:center; }
.tt-h1{ font-family:'Cormorant Garamond',serif; font-size:30px; font-weight:600; color:var(--text,#f4f9f5); margin:2px 0 2px; } /* V505: was hardcoded near-white - invisible on the bright theme */
.tt-sub{ color:var(--muted,#9fd6bc); font-size:13px; margin-bottom:14px; }
.tt-seg{ display:inline-flex; gap:6px; flex-wrap:wrap; justify-content:center; margin-bottom:10px; }
.tt-seg button{ background:var(--btn,#14503c); color:var(--text,#eaf5ee); border:1px solid var(--line2,#2c4636); border-radius:999px; padding:7px 15px; font-size:13px; font-weight:600; cursor:pointer; }
.tt-seg button.active{ background:var(--accent,#ffcf5c); color:var(--accent-fg,#3d2c05); border-color:var(--accent,#ffcf5c); }
.tt-seg button[disabled]{ opacity:.4; cursor:default; }
/* V505: the difficulty + symbol pickers are selects now - one control, no button row */
.tt-select{ appearance:none; -webkit-appearance:none; background:var(--btn,#14503c); color:var(--text,#eaf5ee);
  border:1px solid var(--line2,#2c4636); border-radius:999px; padding:8px 34px 8px 15px; font-size:var(--fld-fs,13px); font-weight:600;
  cursor:pointer; min-height:44px; background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center; transition:border-color .15s ease; }
.tt-select:hover, .tt-select:focus{ border-color:var(--accent,#ffcf5c); }
.tt-select:hover:not(:focus-visible),.tt-select:focus:not(:focus-visible){ outline: none; }
.tt-status{ font-size:16px; font-weight:700; color:var(--text,#f4f9f5); min-height:24px; margin:8px 0; }
.tt-board{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; width:min(360px,86vw); margin:6px auto 10px; aspect-ratio:1; }
.tt-cell{ background:var(--tt-cell,var(--panel,#0f3d2d)); border:1px solid var(--line2,#2c4636); border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:clamp(38px,14vw,64px); font-weight:800; cursor:pointer; user-select:none; transition:background .12s; }
.tt-cell:hover:not(.filled){ background:#123a2a; }
.tt-cell.x{ color:var(--tt-x,#7fd4ff); } .tt-cell.o{ color:var(--tt-o,#ffcf5c); }
.tt-cell.win{ background:rgba(143,212,94,.25); border-color:var(--good,#8fd45e); }
.tt-cell.filled{ cursor:default; }
.tt-score{ display:flex; gap:10px; justify-content:center; margin:6px 0 10px; flex-wrap:wrap; }
.tt-score .s{ background:var(--panel,#0f3d2d); border:1px solid var(--line2,#2c4636); border-radius:10px; padding:6px 14px; font-size:13px; min-width:64px; }
.tt-score .s b{ display:block; font-size:19px; color:var(--accent,#ffcf5c); font-variant-numeric:tabular-nums; }
.tt-actions{ display:flex; gap:8px; justify-content:center; margin-bottom:14px; flex-wrap:wrap; }
.tt-btn{ background:var(--btn,#14503c); color:var(--text,#eaf5ee); border:1px solid var(--line2,#2c4636); border-radius:10px; padding:9px 18px; font-size:14px; font-weight:700; cursor:pointer; }
.tt-btn.pri{ background:var(--accent,#ffcf5c); color:var(--accent-fg,#3d2c05); border-color:var(--accent,#ffcf5c); }
.tt-panel{ background:var(--panel,#0f3d2d); border:1px solid var(--line2,#2c4636); border-radius:12px; padding:12px 14px; text-align:left; margin-top:8px; }
/* V1016: h2, not h3 -- the panels are the first level under the page h1,
   and h1 -> h3 reports a level that does not exist (WCAG 1.3.1). The rule is
   element-qualified, so it moves in the same edit as the tags; same size, same
   colour, same spacing on screen. */
.tt-panel h2{ font-size:14px; color:var(--muted,#9fd6bc); margin:0 0 8px; }
.tt-lt{ display:flex; gap:10px; }
.tt-lt .s{ flex:1; text-align:center; background:var(--btn,#14503c); border-radius:9px; padding:6px; font-size:12px; }
.tt-lt .s b{ display:block; font-size:18px; color:var(--accent,#ffcf5c); }
.tt-lb{ width:100%; border-collapse:collapse; font-size:13px; margin-top:6px; }
.tt-lb td,.tt-lb th{ padding:5px 6px; border-bottom:1px solid var(--line,#1d5642); text-align:left; }
.tt-lb th{ color:var(--muted2,#8fc7ad); font-weight:600; }
.tt-lb td:last-child,.tt-lb th:last-child{ text-align:right; font-variant-numeric:tabular-nums; }
.tt-lb tr.me td{ color:var(--accent,#ffcf5c); font-weight:700; }
.tt-lb .flag{ vertical-align:-1px; border-radius:2px; margin-right:4px; }

/* online + chat (v261) */
.tt-online{ background:var(--panel,#0f3d2d); border:1px solid var(--line2,#2c4636); border-radius:12px; padding:14px; margin-bottom:10px; }
.tt-or{ color:var(--muted2,#8fc7ad); font-size:12px; margin:10px 0 6px; }
.tt-joinrow{ display:flex; gap:8px; justify-content:center; }
.tt-joinrow input{ background:var(--bg,#0b2e22); color:var(--text,#eaf5ee); border:1px solid var(--line2,#2c4636); border-radius:9px; padding:9px 12px; font-size:var(--fld-fs,15px); letter-spacing:2px; text-transform:uppercase; width:150px; text-align:center; }
.fr-msg{ font-size:13px; min-height:18px; margin-top:8px; } .fr-msg.ok{ color:var(--good,#8fd45e); } .fr-msg.bad{ color:#ff8b7a; }
.tt-roombar{ display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; background:var(--panel,#0f3d2d); border:1px solid var(--line2,#2c4636); border-radius:12px; padding:9px 14px; margin-bottom:10px; font-size:13px; }
.tt-roombar b{ color:var(--accent,#ffcf5c); letter-spacing:2px; }
.tt-rlabel{ color:var(--muted2,#8fc7ad); }
.tt-rscore{ color:var(--muted,#9fd6bc); }
.tt-copy,.tt-leave{ background:var(--btn,#14503c); color:var(--text,#eaf5ee); border:1px solid var(--line2,#2c4636); border-radius:7px; padding:3px 9px; cursor:pointer; font-size:12px; }
.tt-chat-btn{ position:fixed; right:16px; bottom:16px; width:52px; height:52px; border-radius:50%; background:var(--accent,#ffcf5c); color:var(--accent-fg,#3d2c05); border:0; font-size:22px; cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,.4); z-index:120; }
.tt-chat-dot{ position:absolute; top:6px; right:6px; width:12px; height:12px; border-radius:50%; background:#ff4d4d; border:2px solid var(--panel,#0f3d2d); }
.tt-chat{ position:fixed; right:16px; bottom:78px; width:min(320px,90vw); max-height:60vh; background:var(--panel,#0f3d2d); border:1px solid var(--line2,#2c4636); border-radius:14px; box-shadow:0 12px 34px rgba(0,0,0,.5); z-index:120; display:flex; flex-direction:column; overflow:hidden; transition:opacity .4s; }
.tt-chat.idle{ opacity:.28; }
.tt-chat-head{ display:flex; justify-content:space-between; align-items:center; padding:10px 12px; font-weight:700; border-bottom:1px solid var(--line2,#2c4636); color:var(--text); }
.tt-chat-x{ background:none; border:0; color:var(--text,#eaf5ee); font-size:15px; cursor:pointer; }
.tt-chat-msgs{ flex:1; overflow-y:auto; padding:10px 12px; display:flex; flex-direction:column; gap:6px; min-height:120px; }
.tt-chat-msg{ font-size:13px; color:var(--text,#eaf5ee); }
.tt-chat-msg .who{ color:var(--accent,#ffcf5c); font-weight:700; }
.tt-chat-msg .ts{ color:var(--muted2,#8fc7ad); font-size:10px; margin-left:4px; }
.tt-chat-in{ display:flex; gap:6px; padding:8px; border-top:1px solid var(--line2,#2c4636); }
.tt-chat-in input{ flex:1; background:var(--bg,#0b2e22); color:var(--text,#eaf5ee); border:1px solid var(--line2,#2c4636); border-radius:8px; padding:8px 10px; font-size:var(--fld-fs,13px); }
.tt-chat-in button{ background:var(--accent,#ffcf5c); color:var(--accent-fg,#3d2c05); border:0; border-radius:8px; padding:8px 12px; font-weight:700; cursor:pointer; }


/* theme swatches (v262) */
.tt-theme-btn{ display:inline-flex; align-items:center; gap:6px; }
.tt-theme-btn .dot{ width:11px; height:11px; border-radius:50%; display:inline-block; }