:root {
  color-scheme: light;
  --ink: #172033;
  --muted: #667085;
  --soft: #98a2b3;
  --bg: #f5f7fa;
  --panel: #ffffff;
  --panel-2: #ffffff;
  --line: #e4e7ec;
  --brand: #2563eb;
  --brand-dark: #1d4ed8;
  --mint: #2563eb;
  --gold: #d97706;
  --rose: #dc3545;
  --sky: #3b82f6;
  --green: #159947;
  --shadow: 0 2px 10px rgba(16, 24, 40, .055);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
}
* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); scroll-behavior: smooth; }
body { min-height: 100vh; margin: 0; color: var(--ink); background: var(--bg); overflow-x: hidden; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible { outline: 3px solid rgba(37,99,235,.25); outline-offset: 2px; }
::selection { background: #dbeafe; }
.ambient, .grain { display: none; }
#app { min-height: 100vh; }
.shell { width: min(1120px, calc(100% - 40px)); margin: 0 auto; padding: 0 0 42px; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:66px; margin-bottom:24px; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:10px; color:inherit; text-decoration:none; }
.brand-mark { width:34px; height:34px; display:grid; place-items:center; border:1px solid #d5e2fb; border-radius:9px; color:var(--brand); background:#eff6ff; }
.brand-mark svg { width:21px; height:21px; }
.brand-name { font-size:15px; font-weight:750; letter-spacing:.04em; }
.brand-sub { display:block; margin-top:2px; color:var(--muted); font-size:9px; letter-spacing:.04em; font-weight:500; }
.topbar-right { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:11px; }
.pill { display:inline-flex; align-items:center; gap:7px; min-height:27px; padding:4px 10px; border:1px solid var(--line); border-radius:999px; background:#fff; color:#475467; font-size:10px; white-space:nowrap; }
.pill-dot { width:7px; height:7px; flex:0 0 7px; border-radius:50%; background:#98a2b3; }
.pill-dot.online { background:var(--green); }
.pill-dot.pending { background:#f0a400; animation:pulse 1.5s infinite; }
.pill-dot.offline { background:var(--rose); }
.hero { position:relative; overflow:hidden; padding:30px 34px; border:1px solid var(--line); border-radius:14px; background:#fff; box-shadow:var(--shadow); }
.hero:before { content:""; position:absolute; top:0; left:0; width:100%; height:4px; background:var(--brand); }
.hero:after { display:none; }
.hero-kicker { display:flex; align-items:center; gap:8px; margin-bottom:11px; color:var(--brand); font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.kicker-line { width:18px; height:2px; background:var(--brand); }
.hero h1 { margin:0; font-size:clamp(28px,4vw,38px); line-height:1.25; letter-spacing:0; font-weight:750; }
.hero h1 em { color:var(--brand); font-style:normal; }
.hero-copy { max-width:720px; margin:10px 0 0; color:var(--muted); font-size:13px; line-height:1.8; }
.hero-notes { display:flex; flex-wrap:wrap; gap:7px; margin-top:16px; }
.hero-notes .pill { border-color:#e4e7ec; color:#475467; background:#f9fafb; }
.section-head { display:flex; align-items:end; justify-content:space-between; gap:16px; margin:27px 1px 13px; }
.section-head h2 { margin:0; font-size:17px; }
.section-head p { margin:0; color:var(--muted); font-size:11px; }
.home-grid { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(290px,.9fr); gap:16px; align-items:start; }
.panel { border:1px solid var(--line); border-radius:13px; background:#fff; box-shadow:var(--shadow); }
.panel-pad { padding:22px; }
.panel-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:18px; }
.panel-title { display:flex; align-items:center; gap:10px; }
.panel-icon { display:grid; place-items:center; width:36px; height:36px; border-radius:10px; color:var(--brand); background:#eff6ff; border:1px solid #dbeafe; }
.panel-icon.gold { color:#b45309; background:#fff7ed; border-color:#ffedd5; }
.panel-icon svg { width:18px; height:18px; }
.panel-title h3 { margin:0; font-size:15px; }
.panel-title p { margin:4px 0 0; color:var(--muted); font-size:10px; }
.mini-label { display:block; margin:0 0 7px; color:#344054; font-size:11px; font-weight:650; }
.field { margin:0 0 14px; }
.input, .select, .textarea { display:block; width:100%; min-height:40px; border:1px solid #d0d5dd; border-radius:8px; padding:9px 11px; color:var(--ink); background:#fff; transition:border-color .15s,box-shadow .15s; }
.input::placeholder,.textarea::placeholder { color:#98a2b3; }
.input:hover,.select:hover,.textarea:hover { border-color:#98a2b3; }
.input:focus,.select:focus,.textarea:focus { border-color:var(--brand); box-shadow:0 0 0 3px rgba(37,99,235,.1); outline:none; }
.select { cursor:pointer; }
.select option { color:var(--ink); background:#fff; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form-row.triple { grid-template-columns:repeat(3,1fr); }
.inline-control { display:flex; align-items:center; gap:10px; }
.inline-control .input,.inline-control .select { flex:1; }
.help { margin:6px 0 0; color:#667085; font-size:11.5px; line-height:1.65; }
.role-settings { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:8px 0 13px; }
.role-setting { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px 10px; border:1px solid var(--line); border-radius:9px; background:#fff; }
.role-setting label { display:flex; align-items:center; gap:8px; cursor:pointer; font-size:12px; color:#344054; }
.role-setting input[type=checkbox],.relay-option input { accent-color:var(--brand); width:17px; height:17px; flex:0 0 17px; }
.role-setting select { width:55px; min-height:28px; padding:3px 6px; font-size:11px; }
.preview-line { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 12px; border:1px solid #dbeafe; border-radius:8px; background:#f8fbff; color:#475467; font-size:11.5px; }
.preview-line strong { color:var(--brand); font-size:12.5px; }
.separator { height:1px; margin:17px 0; background:var(--line); }
.relay-list { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.relay-option { display:flex; align-items:center; gap:9px; min-height:42px; padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:#fff; color:#475467; font-size:12px; line-height:1.5; cursor:pointer; }
.relay-option:has(input:checked) { border-color:#93b4f5; background:#f5f9ff; color:#1d4ed8; }
.relay-option small { display:block; color:#667085; font-size:11px; margin-top:2px; line-height:1.5; }
.custom-relay-row { display:flex; gap:8px; margin-top:9px; }
.custom-relay-row .input { min-height:36px; font-size:11px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:40px; padding:0 14px; border:1px solid transparent; border-radius:8px; cursor:pointer; font-size:12px; font-weight:650; transition:background .15s,border-color .15s,box-shadow .15s,opacity .15s; }
.btn:hover:not(:disabled) { filter:brightness(.97); }
.btn:active:not(:disabled) { filter:brightness(.93); }
.btn:disabled { cursor:not-allowed; opacity:.45; }
.btn-primary { color:#fff; background:var(--brand); border-color:var(--brand); box-shadow:none; }
.btn-primary:hover:not(:disabled) { background:var(--brand-dark); }
.btn-secondary { color:#344054; border-color:#d0d5dd; background:#fff; }
.btn-secondary:hover:not(:disabled) { background:#f9fafb; }
.btn-danger { color:#fff; border-color:#dc3545; background:#dc3545; }
.btn-gold { color:#fff; border-color:#d97706; background:#d97706; }
.btn-quiet { min-height:34px; padding:0 10px; color:#475467; border-color:#d0d5dd; background:#fff; font-size:10px; }
.btn-block { width:100%; min-height:43px; }
.btn svg { width:15px; height:15px; flex:0 0 15px; }
.join-panel { min-height:100%; }
.join-drop { min-height:130px; display:grid; place-items:center; padding:16px; border:1px dashed #cfd4dc; border-radius:10px; text-align:center; background:#fafbfc; }
.join-drop-icon { display:grid; place-items:center; width:40px;height:40px;margin:0 auto 10px;border-radius:12px;color:#b45309;background:#fff7ed; }
.join-drop h4 { margin:0; font-size:13px; }
.join-drop p { max-width:250px; margin:6px auto 0; color:var(--muted); font-size:10px; line-height:1.6; }
.notice { display:flex; align-items:flex-start; gap:9px; padding:11px 12px; border:1px solid #fedf89; border-radius:9px; background:#fffaeb; color:#7a5a13; font-size:12px; line-height:1.65; }
.notice svg { width:16px; height:16px; flex:0 0 16px; margin-top:1px; color:#b54708; }
.notice.info { border-color:#c7d7fe; background:#f5f8ff; color:#475467; }
.tech-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:15px; }
.tech-item { min-height:60px; padding:11px 13px; border:1px solid var(--line); border-radius:9px; background:#fff; }
.tech-item strong { display:block; color:#344054; font-size:10px; }
.tech-item span { display:block; margin-top:4px; color:var(--muted); font-size:9px; line-height:1.5; }
.footer { display:flex; justify-content:space-between; gap:15px; margin-top:22px; padding:13px 1px; border-top:1px solid var(--line); color:#667085; font-size:9px; }
.footer a { color:#475467; text-decoration:none; }
.footer a:hover { color:var(--brand); }

/* Room and game screens */
.room-header { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin:8px 1px 16px; }
.room-title-wrap { min-width:0; }
.eyebrow { color:var(--brand); font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.room-title { margin:5px 0 0; font-size:clamp(22px,3vw,30px); line-height:1.25; letter-spacing:0; overflow-wrap:anywhere; }
.room-subtitle { margin:7px 0 0; color:var(--muted); font-size:11px; line-height:1.6; }
.room-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:7px; }
.room-grid { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(290px,.8fr); gap:15px; align-items:start; }
.stack { display:grid; gap:12px; }
.card { padding:17px; border:1px solid var(--line); border-radius:12px; background:#fff; box-shadow:var(--shadow); }
.card-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:13px; }
.card-head h3 { margin:0; font-size:13px; }
.card-head small { color:var(--muted); font-size:10px; }
.stat-row { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.stat { padding:11px 12px; border:1px solid var(--line); border-radius:9px; background:#fff; }
.stat span { display:block; color:var(--muted); font-size:9px; }
.stat strong { display:block; margin-top:4px; font-size:19px; font-weight:700; }
.stat strong small { margin-left:3px; color:var(--muted); font-size:10px; font-weight:500; }
.player-list { display:grid; gap:7px; }
.player-row { display:flex; align-items:center; gap:9px; min-height:48px; padding:7px 9px; border:1px solid var(--line); border-radius:9px; background:#fff; }
.avatar { width:31px;height:31px;display:grid;place-items:center;flex:0 0 31px;border-radius:8px;color:#344054;background:#f2f4f7;font-size:11px; }
.avatar.wolf { color:#b42318; background:#fef3f2; }
.player-main { min-width:0; flex:1; }
.player-main strong { display:block; overflow:hidden; color:#344054; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.player-main small { display:block; margin-top:3px; color:var(--muted); font-size:11px; }
.row-actions { display:flex; align-items:center; gap:6px; }
.row-actions .btn { min-height:34px; padding:0 12px; font-size:11px; }
.badge { display:inline-flex; align-items:center; gap:5px; padding:4px 9px; border:1px solid #e4e7ec; border-radius:999px; color:#475467; background:#f9fafb; font-size:11px; white-space:nowrap; }
.badge.ok { border-color:#abefc6; color:#067647; background:#ecfdf3; }
.badge.wait { border-color:#fedf89; color:#93370d; background:#fffaeb; }
.badge.dead { border-color:#fecdca; color:#b42318; background:#fef3f2; }
.empty { padding:20px 13px; border:1px dashed #d0d5dd; border-radius:9px; color:var(--muted); text-align:center; font-size:10px; line-height:1.7; }
.share-card { position:relative; overflow:hidden; }
.share-card:after { display:none; }
.qr-wrap { display:grid; place-items:center; margin:6px auto 13px; }
.qr-frame { padding:9px; border:1px solid #e4e7ec; border-radius:10px; background:#fff; box-shadow:none; }
.qr-frame canvas { display:block; width:190px; height:190px; image-rendering:pixelated; }
.share-link { display:flex; gap:7px; align-items:stretch; }
.share-link .input { min-width:0; flex:1; min-height:36px; font-size:9px; color:#475467; background:#f9fafb; }
.relay-chips { display:flex; flex-wrap:wrap; gap:6px; }
.relay-chip { display:inline-flex; align-items:center; gap:6px; padding:5px 8px; border:1px solid var(--line); border-radius:7px; color:#475467; background:#fff; font-size:9px; }
.relay-chip i { display:block; width:6px;height:6px;border-radius:50%;background:#98a2b3; }
.relay-chip i.online { background:var(--green); }
.stage { position:relative; min-height:190px; display:flex; align-items:center; justify-content:center; overflow:hidden; padding:20px; border:1px solid #d0d5dd; border-radius:12px; background:#f9fafb; }
.stage.night { background:#f5f3ff; border-color:#ddd6fe; }
.stage.day { background:#fffaeb; border-color:#fedf89; }
.stage.vote { background:#fff5f5; border-color:#fecdca; }
.stage.end { background:#ecfdf3; border-color:#abefc6; }
.stage-content { position:relative; z-index:1; max-width:540px; text-align:center; }
.stage-symbol { display:grid; place-items:center; width:49px;height:49px;margin:0 auto 8px;border-radius:50%;border:1px solid #d0d5dd;color:#475467;background:#fff;font-size:22px; }
.stage.night .stage-symbol { color:#6941c6; border-color:#d9d6fe; }
.stage.day .stage-symbol { color:#b54708; border-color:#fedf89; }
.stage.vote .stage-symbol { color:#b42318; border-color:#fecdca; }
.stage-content .phase-label { color:var(--muted); font-size:9px; letter-spacing:.08em; font-weight:700; }
.stage-content h2 { margin:6px 0 7px; font-size:clamp(20px,3vw,27px); }
.stage-content p { max-width:470px; margin:0 auto; color:#667085; font-size:11px; line-height:1.7; }
.countdown { display:inline-flex; align-items:center; gap:6px; margin-top:11px; padding:6px 9px; border:1px solid #d0d5dd; border-radius:7px; color:#475467; background:#fff; font-size:11px; font-variant-numeric:tabular-nums; }
.countdown strong { color:#172033; font-size:13px; }
.host-controls { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:14px; }
.progress-wrap { margin-top:13px; }
.progress-label { display:flex; align-items:center; justify-content:space-between; color:var(--muted); font-size:9px; }
.progress-track { height:5px; overflow:hidden; margin-top:6px; border-radius:99px; background:#eaecf0; }
.progress-fill { height:100%; border-radius:99px; background:var(--brand); transition:width .25s; }
.log-list { display:grid; gap:6px; }
.log-item { display:grid; grid-template-columns:28px 1fr; gap:8px; padding:8px; border-radius:8px; background:#f9fafb; }
.log-icon { display:grid;place-items:center;width:26px;height:26px;border-radius:7px;color:#475467;background:#eaecf0;font-size:11px; }
.log-text { color:#344054; font-size:12px; line-height:1.6; }
.log-text small { display:block; margin-top:3px; color:var(--muted); font-size:10px; }
.role-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:7px; }
.role-chip { padding:9px 10px; border:1px solid var(--line); border-radius:8px; background:#fff; }
.role-chip strong { display:block; font-size:12px; }
.role-chip small { display:block; margin-top:4px; color:var(--muted); font-size:11px; }
.player-screen { max-width:760px; margin:0 auto; }
.player-top { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:8px 0 13px; }
.role-card { position:relative; overflow:hidden; min-height:185px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:20px; border:1px solid #bfdbfe; border-radius:12px; background:#fff; box-shadow:var(--shadow); text-align:center; animation:appear .25s ease-out; }
.role-card:after { display:none; }
.role-card.wolf { border-color:#fecdca; background:#fff; }
.role-card-icon { position:relative; z-index:1; width:45px;height:45px;display:grid;place-items:center;margin-bottom:8px;border-radius:12px;color:var(--brand);background:#eff6ff;font-size:22px; }
.role-card.wolf .role-card-icon { color:#b42318;background:#fef3f2; }
.role-card .role-overline { position:relative; z-index:1; color:var(--muted); font-size:9px; letter-spacing:.08em; }
.role-card h2 { position:relative; z-index:1; margin:5px 0 4px; font-size:26px; letter-spacing:.04em; }
.role-card p { position:relative; z-index:1; max-width:410px; margin:0; color:#667085; font-size:10px; line-height:1.65; }
.role-card .allies { position:relative; z-index:1; margin-top:9px; color:#b42318; font-size:10px; }
.role-card .word-reveal { position:relative; z-index:1; margin:6px 0 2px; padding:8px 18px; border-radius:12px; background:#eff6ff; color:#1d4ed8; font-size:22px; font-weight:800; letter-spacing:.04em; }
.phase-strip { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:10px 0; }
.phase-step { display:flex; align-items:center; gap:5px; color:#98a2b3; font-size:9px; }
.phase-step i { display:grid;place-items:center;width:19px;height:19px;border:1px solid #d0d5dd;border-radius:50%;font-style:normal;font-size:8px;background:#fff; }
.phase-step.current { color:var(--brand); }
.phase-step.current i { border-color:#93b4f5;color:var(--brand);background:#eff6ff; }
.phase-step.done { color:#667085; }
.phase-step.done i { border-color:#abefc6;color:#067647;background:#ecfdf3; }
.phase-divider { width:14px; height:1px; background:#d0d5dd; }
.target-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(128px,1fr)); gap:7px; margin-top:10px; }
.target-choice { position:relative; display:flex; align-items:center; gap:9px; min-height:56px; padding:9px 11px; border:1.5px solid #d0d5dd; border-radius:10px; background:#fff; cursor:pointer; transition:border-color .12s,background .12s; }
.target-choice:hover { border-color:#93b4f5; background:#f8fbff; }
.target-choice.selected { border-color:var(--brand); background:#eff6ff; box-shadow:0 0 0 2px rgba(37,99,235,.15); }
.target-choice input { position:absolute; opacity:0; pointer-events:none; }
.target-choice .target-num { display:grid;place-items:center;width:27px;height:27px;border-radius:7px;color:#475467;background:#f2f4f7;font-size:11px; flex:0 0 27px; }
.target-choice strong { overflow:hidden; color:#344054; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.target-choice small { display:block; margin-top:2px; color:var(--muted); font-size:11px; }
.target-choice.is-disabled { border-style:dashed; background:#f8fafc; cursor:not-allowed; opacity:.75; }
.target-choice.is-disabled strong { color:#98a2b3; }
.action-steps { display:flex; gap:8px; margin:10px 0 2px; padding:0; list-style:none; }
.action-steps li { display:flex; align-items:center; gap:6px; padding:5px 10px; border:1px solid var(--line); border-radius:999px; color:var(--muted); background:#f8fafc; font-size:11px; font-weight:700; }
.action-steps li i { display:grid; place-items:center; width:18px; height:18px; border-radius:50%; color:#475467; background:#e4e7ec; font-style:normal; font-size:10px; }
.action-steps li.current { border-color:#93b4f5; color:var(--brand); background:#eff6ff; }
.action-steps li.current i { color:#fff; background:var(--brand); }
.action-steps li.done { border-color:#abefc6; color:#067647; background:#ecfdf3; }
.action-steps li.done i { color:#fff; background:#12b76a; }
.action-detail { margin-top:10px; font-size:11px; }
.action-detail summary { cursor:pointer; color:var(--brand); font-weight:700; }
.action-detail p { margin:6px 0 0; }
.action-box { padding:15px; border:1px solid var(--line); border-radius:10px; background:#fff; }
.action-box h3 { margin:0 0 5px; font-size:14px; }
.action-box p { margin:0; color:var(--muted); font-size:12px; line-height:1.65; }
.action-result { margin-top:10px; padding:10px 11px; border:1px solid #abefc6; border-radius:8px; color:#067647; background:#ecfdf3; font-size:12px; line-height:1.6; }
.my-role-info { display:flex; flex-wrap:wrap; gap:7px; margin-top:11px; }

.modal-backdrop { position:fixed; z-index:20; inset:0; display:grid; place-items:center; padding:18px; background:rgba(16,24,40,.48); animation:fade .15s ease-out; }
.modal { width:min(490px,100%); max-height:min(88vh,760px); overflow:auto; padding:22px; border:1px solid #e4e7ec; border-radius:14px; background:#fff; box-shadow:0 20px 60px rgba(16,24,40,.2); }
.modal h2 { margin:0; font-size:18px; }
.modal .modal-copy { margin:7px 0 16px; color:var(--muted); font-size:13px; line-height:1.7; }
.modal-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:16px; }
.modal-error { min-height:16px; margin-top:7px; color:#b42318; font-size:12px; }
.field.is-disabled { opacity:.55; }
.btn[aria-busy="true"] { opacity:.65; pointer-events:none; }
.input:disabled { background:#f2f4f7; color:#667085; cursor:not-allowed; }
.toast-root { position:fixed; z-index:50; right:16px; bottom:16px; display:grid; gap:7px; pointer-events:none; }
.toast { max-width:min(380px,calc(100vw - 32px)); padding:10px 13px; border:1px solid #b2ddff; border-radius:8px; color:#1849a9; background:#eff8ff; box-shadow:0 4px 16px rgba(16,24,40,.12); font-size:11px; animation:toast-in .18s ease-out; }
.toast.error { border-color:#fecdca; color:#b42318; background:#fef3f2; }
.phase-flash { position:fixed; z-index:15; inset:0; display:grid; place-items:center; pointer-events:none; background:rgba(16,24,40,.72); animation:curtain 1.2s ease forwards; }
.phase-flash-inner { text-align:center; animation:rise .3s ease-out; color:#fff; }
.phase-flash-inner span { color:#d0d5dd; font-size:10px; letter-spacing:.1em; }
.phase-flash-inner strong { display:block; margin-top:7px; font-size:clamp(28px,6vw,48px); }
.phase-flash.night strong { color:#ddd6fe; }
.phase-flash.day strong { color:#fedf89; }
.phase-flash.vote strong { color:#fecdca; }
.phase-flash.end strong { color:#abefc6; }
.result-reveal-overlay { position:fixed; z-index:30; inset:0; display:grid; place-items:center; padding:24px; background:radial-gradient(ellipse at center, rgba(16,24,40,.88) 0%, rgba(16,24,40,.96) 100%); animation:reveal-in .35s ease-out; cursor:pointer; }
.result-reveal-content { position:relative; max-width:560px; width:100%; text-align:center; color:#fff; animation:reveal-rise .45s ease-out; }
.result-reveal-eyebrow { color:#d0d5dd; font-size:11px; font-weight:700; letter-spacing:.14em; }
.result-reveal-text { margin-top:12px; font-size:clamp(24px,5.5vw,40px); font-weight:800; line-height:1.4; letter-spacing:.02em; text-wrap:balance; }
.result-reveal-overlay[data-type="night"] .result-reveal-text { color:#ddd6fe; }
.result-reveal-overlay[data-type="vote"] .result-reveal-text { color:#fecdca; }
.result-reveal-overlay[data-type="ended"] .result-reveal-text { color:#abefc6; }
.result-reveal-pulse { width:64px; height:64px; margin:0 auto 6px; border-radius:50%; border:2px solid rgba(255,255,255,.35); position:relative; animation:heartbeat 1.1s ease-in-out infinite; }
.result-reveal-pulse::after { content:""; position:absolute; inset:22px; border-radius:50%; background:#fff; opacity:.9; }
.result-reveal-overlay[data-type="night"] .result-reveal-pulse { border-color:#a78bfa; box-shadow:0 0 32px rgba(167,139,250,.45); }
.result-reveal-overlay[data-type="vote"] .result-reveal-pulse { border-color:#f87171; box-shadow:0 0 32px rgba(248,113,113,.45); }
.result-reveal-overlay[data-type="ended"] .result-reveal-pulse { border-color:#34d399; box-shadow:0 0 32px rgba(52,211,153,.45); }
.result-reveal-hint { margin-top:16px; color:#98a2b3; font-size:11px; letter-spacing:.08em; animation:pulse 1.5s infinite; }
.spinner { width:22px; height:22px; margin:0 auto; border:2px solid #d0d5dd; border-top-color:var(--brand); border-radius:50%; animation:spin .75s linear infinite; }
.small-link { color:var(--brand); text-decoration:none; border-bottom:1px dotted #93b4f5; cursor:pointer; }
.small-link:hover { color:var(--brand-dark); }
.mobile-only { display:none; }
.hidden { display:none !important; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.48} }
@keyframes heartbeat { 0%,100%{transform:scale(1);opacity:.85} 25%{transform:scale(1.08);opacity:1} 45%{transform:scale(1);opacity:.9} 60%{transform:scale(1.06);opacity:1} }
@keyframes reveal-in { from{opacity:0} to{opacity:1} }
@keyframes reveal-rise { from{opacity:0;transform:translateY(12px) scale(.98)} to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes appear { from{opacity:0;transform:translateY(5px)} to{opacity:1;transform:translateY(0)} }
@keyframes fade { from{opacity:0} to{opacity:1} }
@keyframes toast-in { from{opacity:0;transform:translateY(5px)} to{opacity:1;transform:translateY(0)} }
@keyframes curtain { 0%{opacity:0} 12%{opacity:1} 70%{opacity:1} 100%{opacity:0} }
@keyframes rise { from{opacity:0;transform:translateY(9px)} to{opacity:1;transform:translateY(0)} }
@keyframes spin { to{transform:rotate(360deg)} }
@media (max-width:900px) {
  .home-grid,.room-grid { grid-template-columns:1fr; }
  .tech-strip { grid-template-columns:repeat(2,1fr); }
  .hero { padding:27px 26px; }
}
@media (max-width:600px) {
  .shell { width:calc(100% - 24px); padding-bottom:30px; }
  .topbar { min-height:58px; margin-bottom:17px; }
  .topbar-right .desktop-label { display:none; }
  .hero { padding:23px 17px; border-radius:11px; }
  .hero h1 { font-size:29px; }
  .hero-copy { font-size:12px; }
  .section-head { margin-top:22px; align-items:flex-start; flex-direction:column; gap:5px; }
  .panel-pad { padding:16px; }
  .form-row { grid-template-columns:1fr 1fr; gap:8px; }
  .form-row.triple { grid-template-columns:1fr 1fr; }
  .role-settings { gap:6px; }
  .role-setting { padding:8px 7px; }
  .role-setting label { font-size:10px; }
  .relay-list { grid-template-columns:1fr; }
  .tech-strip { gap:6px; }
  .tech-item { padding:9px; }
  .footer { flex-direction:column; }
  .room-header { flex-direction:column; gap:12px; }
  .room-actions { width:100%; justify-content:flex-start; }
  .room-actions .btn { flex:1; }
  .card { padding:14px; }
  .stage { min-height:180px; padding:15px 10px; }
  .stat-row { grid-template-columns:repeat(3,1fr); gap:6px; }
  .stat { padding:9px; }
  .stat strong { font-size:17px; }
  .stat span { font-size:8px; }
  .qr-frame canvas { width:170px;height:170px; }
  .share-link { flex-direction:column; }
  .share-link .btn { width:100%; }
  .player-row { min-height:46px; }
  .row-actions .btn { min-height:28px; }
  .player-screen .stage { min-height:165px; }
  .player-top { align-items:flex-start; flex-direction:column; }
  .target-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .role-card { min-height:170px; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* ---- Modern setup / settings UI ---- */
.setup-card { padding:0; overflow:hidden; }
.setup-hero { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:20px 22px 16px; border-bottom:1px solid var(--line); background:linear-gradient(180deg,#f8fbff 0%,#fff 100%); }
.setup-steps { display:flex; gap:6px; margin:16px 22px 0; padding:0; list-style:none; }
.setup-steps li { flex:1; display:flex; align-items:center; gap:7px; padding:7px 10px; border:1px solid var(--line); border-radius:999px; background:#f8fafc; color:var(--muted); font-size:10.5px; font-weight:700; white-space:nowrap; }
.setup-steps li i { display:grid; place-items:center; width:20px; height:20px; border-radius:50%; background:#e4e7ec; color:#475467; font-style:normal; font-size:10px; flex:0 0 20px; }
.setup-steps li.on { border-color:#bfd3fb; background:#eff6ff; color:var(--brand-dark); }
.setup-steps li.on i { background:var(--brand); color:#fff; }
.setup-body { padding:18px 22px 22px; display:grid; gap:18px; }
.setup-step { border:1px solid var(--line); border-radius:12px; padding:14px; background:#fff; }
.setup-step-head { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.step-num { display:grid; place-items:center; width:26px; height:26px; border-radius:8px; background:#172033; color:#fff; font-size:12px; font-weight:800; flex:0 0 26px; }
.setup-step-head h4 { margin:0; font-size:13.5px; }
.setup-step-head p { margin:2px 0 0; color:var(--muted); font-size:11px; }
.game-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.game-card { position:relative; display:flex; gap:10px; align-items:flex-start; padding:12px; border:1.5px solid var(--line); border-radius:12px; cursor:pointer; background:#fff; transition:border-color .15s, box-shadow .15s, background .15s; }
.game-card:hover { border-color:#b2ccff; }
.game-card:has(input:checked) { border-color:var(--brand); background:#f5f9ff; box-shadow:0 0 0 3px rgba(37,99,235,.12); }
.game-card input { position:absolute; opacity:0; pointer-events:none; }
.game-icon { display:grid; place-items:center; width:38px; height:38px; border-radius:10px; background:#eff6ff; border:1px solid #dbeafe; font-size:19px; flex:0 0 38px; }
.game-card strong { display:block; font-size:13px; }
.game-card small { display:block; margin-top:3px; color:var(--muted); font-size:11px; line-height:1.55; }
.game-check { position:absolute; top:8px; right:8px; width:20px; height:20px; border-radius:50%; display:grid; place-items:center; background:#e4e7ec; color:#fff; font-size:12px; }
.game-card:has(input:checked) .game-check { background:var(--brand); }
.cap-row { display:flex; gap:8px; align-items:stretch; }
.cap-row .select { flex:1; }
.cap-presets { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.cap-preset { border:1px solid var(--line); background:#f8fafc; border-radius:999px; padding:5px 11px; font-size:11.5px; font-weight:700; color:#475467; cursor:pointer; }
.cap-preset:hover { border-color:#93b4f5; color:var(--brand-dark); }
.cap-preset.on { background:#172033; border-color:#172033; color:#fff; }
.preview-card { border:1px solid #bfd3fb; background:linear-gradient(180deg,#f8fbff,#eff6ff); border-radius:12px; padding:12px 13px; }
.preview-card-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.preview-label { display:inline-flex; align-items:center; gap:7px; font-size:11px; font-weight:800; color:var(--brand-dark); letter-spacing:.02em; }
.preview-dot { width:8px; height:8px; border-radius:50%; background:var(--brand); box-shadow:0 0 0 4px rgba(37,99,235,.15); }
.preview-card strong { display:block; margin-top:7px; font-size:12.5px; line-height:1.7; color:#1e2a44; font-weight:700; }
.preview-card small { display:block; margin-top:5px; color:#667085; font-size:11px; line-height:1.65; }
.switch-row { display:flex; align-items:flex-start; gap:12px; padding:12px; border:1px solid var(--line); border-radius:12px; cursor:pointer; background:#fff; transition:border-color .15s, background .15s; }
.switch-row:hover { border-color:#b2ccff; }
.switch-row:has(input:checked) { border-color:#93b4f5; background:#f8fbff; }
.switch-row input { position:absolute; opacity:0; pointer-events:none; }
.switch { position:relative; width:38px; height:22px; border-radius:999px; background:#d0d5dd; flex:0 0 38px; margin-top:2px; transition:background .15s; }
.switch::after { content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:left .15s; }
.switch-row:has(input:checked) .switch { background:var(--brand); }
.switch-row:has(input:checked) .switch::after { left:18px; }
.switch-text strong { display:block; font-size:12.5px; }
.switch-text small { display:block; margin-top:3px; color:var(--muted); font-size:11px; line-height:1.6; }
.role-pick-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:10px; }
.role-pick { position:relative; display:flex; align-items:center; gap:9px; padding:10px 11px; border:1.5px solid var(--line); border-radius:11px; cursor:pointer; background:#fff; }
.role-pick:has(input:checked) { border-color:var(--brand); background:#f5f9ff; }
.role-pick input { accent-color:var(--brand); width:16px; height:16px; }
.role-pick strong { display:block; font-size:12.5px; }
.role-pick small { display:block; color:var(--muted); font-size:10.5px; }
.role-pick .count { margin-left:auto; font-size:10px; font-weight:800; color:var(--brand-dark); background:#e8efff; border-radius:999px; padding:2px 8px; }
.balance-table { border:1px solid var(--line); border-radius:10px; overflow:hidden; margin-top:8px; }
.balance-table > div:last-child { border-bottom:none !important; }
.relay-pick { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.relay-pick-card { display:flex; gap:9px; align-items:flex-start; padding:10px 11px; border:1.5px solid var(--line); border-radius:11px; cursor:pointer; background:#fff; font-size:12px; }
.relay-pick-card:has(input:checked) { border-color:var(--brand); background:#f5f9ff; }
.relay-pick-card input { accent-color:var(--brand); width:16px; height:16px; margin-top:2px; }
.relay-pick-card small { display:block; color:var(--muted); font-size:10.5px; margin-top:2px; }
.relay-status-dot { width:8px; height:8px; border-radius:50%; background:#12b76a; margin-top:6px; flex:0 0 8px; }
.setup-submit { position:sticky; bottom:0; padding-top:6px; }
.accordion { border:1px solid var(--line); border-radius:11px; overflow:hidden; }
.accordion summary { cursor:pointer; padding:11px 13px; font-size:12px; font-weight:700; color:#344054; background:#f8fafc; list-style:none; display:flex; justify-content:space-between; align-items:center; }
.accordion summary::-webkit-details-marker { display:none; }
.accordion summary::after { content:"+"; color:var(--brand); font-size:15px; }
.accordion[open] summary::after { content:"–"; }
.accordion-body { padding:12px 13px; border-top:1px solid var(--line); }
/* settings modal */
.modal.modal-wide { width:min(580px,100%); }
.set-section { border:1px solid var(--line); border-radius:12px; padding:13px; margin-bottom:12px; background:#fff; }
.set-section > h4 { margin:0 0 3px; font-size:13px; }
.set-section > p { margin:0 0 10px; color:var(--muted); font-size:11px; line-height:1.6; }
.set-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.set-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.set-preview { margin-top:4px; }
.modal-wide { width:min(560px,100%); }

/* ---- Player UX polish ---- */
.player-screen { scroll-padding-top:12px; }
.player-screen .room-header.player-header { align-items:flex-end; }
.player-screen .room-title { font-size:clamp(19px,2.6vw,26px); }
.player-screen .player-actions { gap:6px; }
.player-screen .player-actions .btn { min-height:36px; font-size:11.5px; }
.player-screen .phase-strip { overflow-x:auto; padding-bottom:4px; scrollbar-width:thin; }
.player-screen .phase-step { flex:0 0 auto; font-size:10px; }
.stage-compact { min-height:0; padding:16px 18px; }
.stage-compact .stage-symbol { display:none; }
.stage-compact .stage-content h2 { font-size:clamp(18px,2.6vw,23px); margin:4px 0 5px; }
.stage-compact .stage-content p { font-size:12px; }
.player-screen .role-card { margin-top:13px; padding:22px 18px; }
.player-screen .role-reveal-btn { min-height:52px; font-size:14px; }
.player-screen .role-hide-btn { min-width:180px; }
.action-box { border-radius:12px; }
.action-box.action-urgent { border:1.5px solid #bfd3fb; background:linear-gradient(180deg,#fbfdff,#f5f9ff); box-shadow:0 4px 18px rgba(37,99,235,.09); }
.action-box.action-urgent > .card-head h3 { font-size:15px; }
.target-grid { gap:8px; }
.target-choice { min-height:64px; padding:10px 12px; gap:10px; }
.target-choice .target-num { width:32px; height:32px; flex-basis:32px; font-size:12px; font-weight:800; border-radius:9px; }
.target-choice strong { font-size:14px; }
.target-choice .target-check { display:none; margin-left:auto; width:26px; height:26px; flex:0 0 26px; border-radius:50%; background:var(--brand); color:#fff; font-size:14px; font-weight:800; place-items:center; }
.target-choice.selected { border-width:2px; padding:9.5px 11.5px; }
.target-choice.selected .target-num { background:var(--brand); color:#fff; }
.target-choice.selected .target-check { display:grid; }
.target-choice.is-disabled .target-num { background:#e4e7ec; color:#98a2b3; }
.action-submit-bar { position:sticky; bottom:10px; z-index:5; margin-top:14px; padding:10px; border:1px solid #bfd3fb; border-radius:12px; background:rgba(255,255,255,.94); backdrop-filter:blur(8px); box-shadow:0 8px 24px rgba(16,24,40,.12); }
.action-submit-bar .action-submit { min-height:52px; font-size:14px; font-weight:800; }
.action-submit-bar .action-submit:disabled { opacity:.55; }
.action-submit-hint { margin:8px 2px 0 !important; text-align:center; font-size:11px; }
.action-steps { flex-wrap:wrap; }
@media (max-width:600px) {
  .setup-hero { padding:16px 16px 13px; }
  .setup-steps { margin:12px 16px 0; overflow-x:auto; }
  .setup-steps li { flex:0 0 auto; }
  .setup-body { padding:14px 16px 16px; }
  .game-grid, .relay-pick { grid-template-columns:1fr; }
  .set-grid-2 { grid-template-columns:1fr 1fr; }
  .set-grid-3 { grid-template-columns:1fr 1fr; }
  .role-pick-grid { grid-template-columns:1fr 1fr; }
  .player-screen .room-header.player-header { gap:10px; }
  .player-screen .player-actions { width:100%; display:grid; grid-template-columns:1fr 1fr; }
  .player-screen .player-actions .btn { flex:none; width:100%; min-height:40px; }
  .target-choice { min-height:68px; }
  .action-submit-bar { bottom:8px; margin-left:-4px; margin-right:-4px; }
}

/* ---- Host UX ---- */
.host-screen { width:min(1120px,calc(100% - 40px)); margin:0 auto; padding:0 0 120px; }
.host-header { align-items:flex-start; }
.host-actions { align-items:flex-start; }
.host-menu { position:relative; }
.host-menu summary { list-style:none; cursor:pointer; }
.host-menu summary::-webkit-details-marker { display:none; }
.host-menu-body { position:absolute; right:0; top:calc(100% + 6px); z-index:10; display:grid; gap:6px; min-width:190px; padding:10px; border:1px solid var(--line); border-radius:10px; background:#fff; box-shadow:0 12px 32px rgba(16,24,40,.14); }
.host-menu-body .btn { width:100%; justify-content:flex-start; }
.host-next { display:flex; align-items:center; gap:14px; margin:4px 1px 12px; padding:13px 15px; border:1px solid #bfd3fb; border-radius:12px; background:linear-gradient(180deg,#f8fbff,#eff6ff); }
.host-next.is-alert { border-color:#fedf89; background:linear-gradient(180deg,#fffaeb,#fff7e6); }
.host-next.is-ready { border-color:#abefc6; background:linear-gradient(180deg,#f6fef9,#ecfdf3); }
.host-next-step { flex:0 0 auto; padding:5px 10px; border-radius:999px; background:#172033; color:#fff; font-size:10px; font-weight:800; letter-spacing:.04em; white-space:nowrap; }
.host-next.is-alert .host-next-step { background:#b54708; }
.host-next.is-ready .host-next-step { background:#067647; }
.host-next-main { min-width:0; flex:1; }
.host-next-main strong { display:block; font-size:13.5px; line-height:1.5; }
.host-next-main small { display:block; margin-top:3px; color:var(--muted); font-size:11px; line-height:1.6; }
.host-next-cta { flex:0 0 auto; }
.host-next-cta .btn { min-height:42px; white-space:nowrap; }
.host-stats { margin:0 1px 14px; }
.host-players .player-row.is-pending { border-color:#fedf89; background:#fffaeb; }
.pending-alert { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; padding:11px 12px; border:1px solid #fedf89; border-radius:10px; background:#fffaeb; }
.pending-alert strong { display:block; font-size:13px; color:#93370d; }
.pending-alert small { display:block; margin-top:2px; color:#7a5a13; font-size:11px; }
.pending-alert .btn { flex:0 0 auto; min-height:42px; }
.qr-expand { cursor:zoom-in; padding:9px; }
.qr-expand-hint { display:block; margin-top:6px; color:var(--muted); font-size:10px; }
.qr-frame.qr-large canvas { width:min(64vw,300px); height:min(64vw,300px); }
.host-sticky-bar { position:fixed; left:50%; transform:translateX(-50%); bottom:calc(12px + env(safe-area-inset-bottom)); z-index:12; width:min(720px,calc(100% - 24px)); display:flex; align-items:center; gap:12px; padding:10px 10px 10px 16px; border:1px solid #bfd3fb; border-radius:14px; background:rgba(255,255,255,.96); backdrop-filter:blur(10px); box-shadow:0 12px 36px rgba(16,24,40,.18); }
.host-sticky-text { min-width:0; flex:1; }
.host-sticky-text strong { display:block; overflow:hidden; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.host-sticky-text small { display:block; margin-top:2px; color:var(--muted); font-size:11px; }
.host-sticky-btn { flex:0 0 auto; min-height:48px; font-size:13px; }
@media (max-width:900px) {
  .host-grid.host-lobby { display:flex; flex-direction:column; }
  .host-grid.host-lobby .host-side { order:-1; }
}
@media (max-width:600px) {
  .host-screen { width:calc(100% - 24px); padding-bottom:132px; }
  .host-header { flex-direction:column; }
  .host-actions { width:100%; }
  .host-actions .btn-primary { flex:1; }
  .host-menu { flex:1; }
  .host-menu summary { width:100%; }
  .host-next { flex-wrap:wrap; gap:10px; }
  .host-next-cta { width:100%; }
  .host-next-cta .btn { width:100%; }
  .host-stats { grid-template-columns:repeat(3,1fr); gap:6px; }
  .pending-alert { flex-direction:column; align-items:stretch; text-align:center; }
  .pending-alert .btn { width:100%; }
  .host-sticky-bar { gap:8px; padding:8px 8px 8px 12px; }
  .host-sticky-text small { display:none; }
  .host-sticky-btn { flex:1; }
}

/* ---- Mobile UX: touch, zoom, safe-area, readability ---- */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: auto;
}
#app { min-height: 100vh; min-height: 100dvh; }
button, summary, .target-choice, .game-card, .role-pick, .relay-pick-card, .switch-row {
  touch-action: manipulation;
}
img, canvas, svg { max-width: 100%; }
.shell, .host-screen, .player-screen {
  padding-left: max(0px, env(safe-area-inset-left));
  padding-right: max(0px, env(safe-area-inset-right));
}
/* iOS auto-zoom prevention: inputs must be >=16px on touch devices */
@media (max-width:600px) {
  .input, .select, .textarea {
    font-size: 16px;
  }
  .custom-relay-row .input { font-size: 16px; }
  .share-link .input { font-size: 12px; }
  /* 44px minimum touch targets */
  .btn { min-height: 44px; }
  .btn-quiet { min-height: 40px; }
  .row-actions .btn { min-height: 40px; padding: 0 14px; }
  .cap-preset { min-height: 36px; padding: 7px 14px; }
  /* One-column target list: fewer mis-taps with thumbs */
  .target-grid { grid-template-columns: minmax(0, 1fr); }
  .target-choice { min-height: 60px; }
  /* Player / host sticky action bars clear the home indicator */
  .action-submit-bar {
    bottom: calc(8px + env(safe-area-inset-bottom));
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }
  .host-sticky-bar { bottom: calc(10px + env(safe-area-inset-bottom)); }
  .player-screen { padding-bottom: 24px; }
  /* Toasts sit above sticky bars and stay readable with one hand */
  .toast-root {
    left: 12px;
    right: 12px;
    bottom: calc(84px + env(safe-area-inset-bottom));
    justify-items: center;
  }
  .toast { width: min(480px, 100%); font-size: 13px; }
  /* Top bar wraps instead of overflowing on 320-360px screens */
  .topbar { flex-wrap: wrap; row-gap: 8px; }
  .topbar-right { flex-wrap: wrap; }
  .pill { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  /* Horizontal scrollers feel native on touch */
  .phase-strip, .setup-steps {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .phase-strip::-webkit-scrollbar, .setup-steps::-webkit-scrollbar { display: none; }
  /* Bottom-sheet modals: thumb-reachable, keyboard-safe */
  .modal-backdrop {
    place-items: end center;
    padding: 0;
  }
  .modal, .modal.modal-wide {
    width: 100%;
    max-height: 92vh;
    max-height: 92dvh;
    border-radius: 16px 16px 0 0;
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
  }
  .modal-actions { flex-wrap: wrap; }
  .modal-actions .btn { flex: 1 1 140px; min-height: 46px; }
  /* Result / flash overlays respect notches */
  .result-reveal-overlay, .phase-flash {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .btn, .target-choice { -webkit-tap-highlight-color: transparent; }
}