@font-face{font-family:Roboto;src:url('fonts/Roboto-Regular.ttf') format('truetype');font-weight:100 500;font-display:swap}
@font-face{font-family:Roboto;src:url('fonts/Roboto-Bold.ttf') format('truetype');font-weight:600 900;font-display:swap}
:root{color-scheme:dark;--background:#103c29;--surface:#204c3b;--dark:#0d2922;--accent:#dfbb76;--text:#ffedcb;--muted:#bdd0bf;--border:color-mix(in srgb,var(--accent) 62%,var(--background));font:16px Roboto,Arial,sans-serif;background:var(--background);color:var(--text)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;width:100%}body{background:var(--background)}[hidden]{display:none!important}button,input,select{font:inherit}button{cursor:pointer}button,input{color:var(--text)}button:focus-visible,input:focus-visible,canvas:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.column{width:100%;max-width:484px;min-height:100dvh;margin:auto;padding:calc(18px + env(safe-area-inset-top)) calc(22px + env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) calc(22px + env(safe-area-inset-left));outline:none}
.logo{display:block;width:100%;height:76px;object-fit:contain}.step{font-size:11px;letter-spacing:.12em;text-align:center;color:var(--muted);padding:6px 0;margin:0}.heading{font-size:27px;font-weight:700;text-align:center;margin:0;padding:6px 0}.quiet{text-align:center;color:var(--muted);font-size:14px;line-height:1.45;padding:6px 0;margin:0;white-space:pre-line}.note{font-size:11px;line-height:1.4;white-space:pre-line;padding:6px 0;margin:0;color:var(--muted)}
.button{display:block;width:100%;min-height:52px;margin:0 0 10px;padding:8px 12px;border:1px solid var(--border);border-radius:18px;background:var(--surface);font-size:16px;font-weight:500;line-height:1.25;text-align:center;white-space:pre-line;touch-action:manipulation}.button.primary,.button.selected{background:var(--accent);color:var(--background)}.button.nav{margin-top:8px;background:var(--dark);color:var(--accent)}.button:disabled{cursor:default;opacity:.65}.link-button{display:block;width:100%;min-height:48px;background:transparent;border:0;color:var(--text);font-size:14px;text-align:center;padding:8px}.icon{display:block;width:36px;height:40px;flex:0 0 36px;color:var(--accent)}.icon svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.profile{padding:16px 16px 12px;margin-bottom:18px;border:1px solid var(--border);border-radius:18px;background:var(--surface)}.profile-row{display:flex;align-items:center}.avatar-choice{display:flex;flex-direction:column;align-items:center;padding:0;background:transparent;border:0;flex:0 0 76px;color:var(--accent);font-size:12px}.avatar-choice canvas{width:76px;height:76px;border:1px solid var(--border);border-radius:18px}.avatar-choice span{padding:6px 0}.name-field{flex:1;min-width:0;padding-left:14px}.name-field label{font-size:13px;display:block;padding:6px 0}.name-field input{width:100%;height:54px;background:transparent;border:0;border-bottom:1px solid var(--muted);border-radius:0;padding:0 4px;font-size:21px;box-shadow:none}.name-field input::placeholder{color:var(--muted)}.venue-short{display:flex;align-items:center;width:100%;min-height:52px;padding:8px 0 4px;border:0;background:transparent;text-align:left;color:var(--text);font-size:14px;font-weight:500}.venue-short img,.venue-short canvas{width:50px;height:36px;object-fit:cover;border-radius:7px}.venue-short span{flex:1;padding:0 8px 0 10px}.venue-short b{font-size:22px;font-weight:400}.profile>.note{font-size:11px;color:var(--text)}
.action-tile{display:flex;align-items:center;width:100%;min-height:82px;padding:12px;margin:0 0 12px;border:1px solid var(--border);border-radius:18px;background:var(--surface);text-align:left;color:var(--text)}.action-tile>.words{flex:1;padding:0 4px 0 12px}.action-tile strong{font-size:18px;font-weight:500;display:block;margin-bottom:4px}.action-tile small{font-size:13px;color:var(--muted);line-height:1.35;display:block}.action-tile>.arrow{font-size:23px}.help-tile{display:flex;align-items:center;width:100%;min-height:48px;margin-bottom:8px;padding:6px 12px;border:0;background:transparent;color:var(--text);font-size:14px;text-align:left}.help-tile .icon{width:22px;height:24px;flex-basis:22px}.help-tile>.help-label{flex:1;padding-left:10px}.help-tile b{font-size:20px;font-weight:400}.footer-row{display:flex;gap:10px;padding:4px 0}.footer-row button{display:flex;align-items:center;justify-content:center;flex:1;min-height:48px;padding:8px;border:1px solid color-mix(in srgb,var(--muted) 18%,transparent);border-radius:18px;background:var(--dark);color:var(--text);font-size:13px;font-weight:500}.footer-row .icon{width:21px;height:24px;flex-basis:21px;margin-right:8px}.exit-button{font-size:13px!important;min-height:48px!important}.version{font-size:10px!important;text-align:center;padding:6px 0;color:var(--muted);margin:0}.install-button{font-size:12px;min-height:40px;color:var(--accent);border:0;background:transparent;display:block;width:100%}
dialog{padding:14px 22px 12px;border:1px solid var(--border);border-radius:20px;background:var(--background);color:var(--text);width:calc(100vw - 32px);max-width:440px;max-height:calc(100dvh - 32px);overflow:hidden;box-shadow:0 18px 70px #0005}dialog[open]{display:flex;flex-direction:column}dialog::backdrop{background:#0008}dialog header,dialog footer{flex:0 0 auto}dialog h2{font-size:22px;line-height:1.2;text-align:center;margin:0;padding:6px 0 10px;outline:none}#modal-body{overflow:auto;overscroll-behavior:contain;min-height:0;padding:0 0 3px}dialog footer{padding-top:4px}dialog footer .button:last-child{margin-bottom:0}dialog .label{font-size:16px;padding:6px 0;margin:0;line-height:1.4;white-space:pre-line}dialog .label.large{font-size:19px;font-weight:700}dialog .row{display:flex;gap:6px;align-items:center}dialog .row>.button{flex:1;min-width:0;font-size:14px;margin:3px 0}.setting-toggle{display:flex;min-height:52px;align-items:center;padding:6px 0;font-size:15px;gap:12px}.setting-toggle>span{flex:1}.setting-toggle input{appearance:none;width:48px;height:27px;border:1px solid color-mix(in srgb,var(--muted) 50%,var(--background));border-radius:12px;background:color-mix(in srgb,var(--muted) 28%,var(--background));position:relative;cursor:pointer;flex:0 0 48px}.setting-toggle input:after{content:'';position:absolute;width:23px;height:23px;top:1px;left:1px;border-radius:50%;background:var(--muted);box-shadow:0 1px 3px #0005}.setting-toggle input:checked:after{left:22px;background:var(--accent)}.deck-option{display:flex;align-items:center;min-height:56px;font-size:16px;gap:12px}.deck-option input{width:20px;height:20px;accent-color:var(--accent)}
.character-row,.venue-row{display:flex;align-items:center;width:100%;padding:6px 10px 6px 6px;gap:12px;min-height:100px;margin-bottom:10px;background:var(--surface);border:1px solid var(--border);border-radius:12px;color:var(--text);text-align:left;font-size:16px}.character-row.selected{border:2px solid var(--accent)}.character-face{width:88px;height:88px;flex:0 0 88px;object-fit:contain}.venue-row{padding:10px;min-height:84px;border-radius:14px;gap:12px}.venue-row img,.venue-row canvas{width:82px;height:64px;object-fit:cover;border-radius:9px}.venue-row strong{display:block;font-size:16px;font-weight:500}.venue-row small{display:block;font-size:12px;line-height:1.35;margin-top:5px;color:inherit;opacity:.8}.venue-preview{width:100%;height:auto;aspect-ratio:3/2;display:block;border-radius:12px}.photo-editor{width:100%;height:238px;display:block;border-radius:5px}.photo-proportions .button{font-size:12px!important}.room-code{font-size:64px;line-height:1.1;letter-spacing:.16em;padding-left:.16em;font-weight:700;text-align:center;color:var(--accent);font-variant-numeric:tabular-nums;margin:8px 0 18px}.code-input{width:100%;height:72px;display:block;margin:8px 0 16px;border:1px solid var(--border);border-radius:12px;background:var(--dark);color:var(--text);font-size:40px;font-weight:500;text-align:center;letter-spacing:.2em;font-variant-numeric:tabular-nums}.connection-illustration{display:block;width:100%;height:145px}.connection-illustration .dot{animation:connection-dot 1.8s infinite}.connection-illustration .dot:nth-of-type(2){animation-delay:.6s}.connection-illustration .dot:nth-of-type(3){animation-delay:1.2s}@keyframes connection-dot{0%,35%{opacity:1}40%,100%{opacity:.4}}.waiting-info{background:var(--surface);padding:12px 16px;border:1px solid var(--border);border-radius:18px;margin:10px 0}.waiting-info h3{font-size:19px;text-align:center;margin:6px 0}.waiting-player{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--muted);font-size:14px}.waiting-player img{width:36px;height:36px;border-radius:50%;object-fit:cover}
#game{position:fixed;inset:0;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);background:var(--dark);overflow:hidden}#table{display:block;width:100%;height:100%;touch-action:none;outline:none}#connection-status{position:absolute;top:env(safe-area-inset-top);left:8px;right:8px;padding:8px;margin:0;text-align:center;font-size:13px;background:var(--dark);color:var(--accent);border:1px solid var(--border);border-radius:10px;pointer-events:none}#notice{position:fixed;bottom:calc(18px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);max-width:calc(100vw - 24px);width:max-content;padding:12px 16px;box-shadow:0 8px 30px #0006;background:var(--dark);color:var(--text);border:1px solid var(--accent);border-radius:12px;font-size:14px;text-align:center;z-index:1000}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
dialog.history{width:calc(100vw - 24px);max-width:480px;height:calc(100dvh - 24px);max-height:calc(100dvh - 24px);padding:10px 12px}dialog.history h2{font-size:20px;padding:2px 0 8px}dialog.history #modal-body{flex:1;padding:6px 2px}dialog.history footer{padding-top:6px}dialog.history .button{min-height:48px;font-size:14px;border-radius:12px;padding:6px 8px}dialog.history .quiet{font-size:12px;text-align:left}dialog.history .label{padding:3px 0}.history-card{display:block;width:100%;padding:9px 12px;border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);border-radius:12px;background:var(--dark);color:var(--text);margin:0 0 8px;text-align:left;font-size:15px}.history-card p{margin:0;padding:3px 0;white-space:pre-line;line-height:1.35}.history-card small{display:block;font-size:11px;color:var(--muted);padding:3px 0}.history-card .outcome{font-weight:500;font-size:16px;color:var(--accent)}.score-row{display:flex;align-items:center;justify-content:space-between;padding:3px 0;font-size:15px;gap:10px}.score-row b{font-size:17px;font-weight:500}.history-count{font-size:12px;color:var(--muted);padding:4px 0 8px}.history-cards{display:flex;align-items:flex-start}.history-cards>div{flex:1;min-width:0;text-align:center}.history-cards canvas{display:block;margin:2px auto;width:61px;height:108px}.history-cards small{font-size:12px;min-height:30px;color:var(--text);white-space:normal;overflow-wrap:anywhere}.metric{flex:1;padding:8px;background:var(--dark);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);border-radius:12px;text-align:center;margin:3px 0;min-width:0}.metric strong{display:block;font-size:24px;font-weight:500;padding:3px 0}.metric small{display:block;font-size:12px;padding:3px 0}.recent-badge{flex:1;text-align:center;font-size:23px;height:42px}.record-heading{font-size:19px;font-weight:700;color:var(--accent);padding:6px 0;margin:0}
@media(prefers-reduced-motion:reduce){.connection-illustration .dot{animation:none}}@media(max-width:350px){.column{padding-left:18px;padding-right:18px}dialog{padding-left:18px;padding-right:18px}.profile{padding-left:12px;padding-right:12px}.name-field{padding-left:10px}}

/* Clear secondary actions and compact connection steps; the accepted phone table is unchanged. */
.help-tile{min-height:54px;margin:8px 0 12px;border:1px solid color-mix(in srgb,var(--muted) 25%,transparent);border-radius:16px;background:var(--dark)}
.help-tile>.icon{flex:0 0 24px;padding:0;margin:0}.help-tile>.help-label{padding-left:12px}.help-tile>b{padding-left:10px}
.button.profile-edit{text-align:left;padding:10px 14px;background:var(--dark);border-color:color-mix(in srgb,var(--muted) 25%,transparent)}
.profile-edit strong{display:block;font-size:16px;font-weight:500}.profile-edit small{display:block;font-size:12px;line-height:1.4;color:var(--muted);padding-top:4px}
.column[data-view="waiting"] .logo{height:48px}.column[data-view="waiting"] .step{padding:4px 0}.column[data-view="waiting"] .heading{font-size:25px}
.waiting-code{padding:8px 14px 12px;margin:10px 0 14px;background:var(--dark);border:1px solid var(--border);border-radius:18px}
.waiting-code .room-code{margin:4px 0 6px}.waiting-code .quiet{padding:3px 0}.column[data-view="waiting"]>.button strong{display:block;font-size:16px;font-weight:500}
.column[data-view="waiting"]>.button small{display:block;font-size:12px;line-height:1.4;opacity:.85;padding-top:4px}
.column[data-view="waiting"] .waiting-info{padding:8px 12px;margin:0 0 8px}.column[data-view="waiting"] .waiting-info .quiet{padding:3px 0}
dialog.connection-guide{max-width:700px}.connection-guide #modal-tabs>.row{margin-bottom:8px}.connection-guide #modal-body>.quiet:first-child{text-align:left;padding:4px 0 12px}
.guide-steps{display:grid;grid-template-columns:1fr 1fr;gap:12px}.guide-step{padding:12px;background:var(--surface);border:1px solid var(--border);border-radius:14px;min-width:0}
.guide-step h3{display:flex;gap:8px;align-items:center;font-size:16px;font-weight:500;margin:0 0 10px}.guide-number{flex:0 0 25px;height:25px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--dark);font-size:14px}
.guide-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:9px 12px;background:var(--dark);border:1px solid color-mix(in srgb,var(--muted) 30%,transparent);border-radius:12px;min-height:150px;color:var(--text)}
.guide-screen>small{font-size:11px}.guide-screen .guide-example{align-self:flex-start;font-size:10px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.guide-action{display:block;width:100%;padding:7px 9px;border:1px solid var(--border);border-radius:9px;text-align:center;font-size:13px;font-weight:500;line-height:1.3;background:var(--surface)}.guide-action.primary{background:var(--accent);color:var(--dark)}
.guide-arrow{font-size:20px;line-height:20px;color:var(--accent)}.guide-code{font-size:36px;font-weight:700;line-height:1.15;letter-spacing:.14em;padding-left:.14em;color:var(--accent)}
.guide-digits{display:flex;justify-content:center;gap:6px;padding:4px 0}.guide-digits span{display:grid;place-items:center;width:34px;height:40px;border:1px solid var(--accent);border-radius:6px;font-size:25px;font-weight:500;background:var(--background)}
.guide-explanation{font-size:13px;line-height:1.5;margin:10px 0 0}.guide-message{display:grid;grid-template-columns:26px 1fr;gap:3px 7px;padding:7px 9px;width:100%;border-radius:9px;background:var(--surface);font-size:12px}.guide-message .icon{grid-row:1/3;width:24px;height:28px}.guide-message strong{font-weight:500}.guide-message>span:last-child{color:var(--muted);font-size:11px}
@media(max-width:540px){.guide-steps{grid-template-columns:1fr}.guide-step{padding:10px}.guide-screen{min-height:130px}.guide-explanation{margin-top:8px}}
/* The wide screen gets its own undistorted venue backdrop. Phone geometry stays native. */
@media(min-width:900px) and (min-aspect-ratio:6/5){
 body{background-image:linear-gradient(#061a14a8,#061a14c9),var(--venue-image);background-size:cover;background-position:center 42%;background-attachment:fixed}
 .column{position:relative;background:color-mix(in srgb,var(--background) 91%,transparent);border-inline:1px solid color-mix(in srgb,var(--accent) 30%,transparent);box-shadow:0 0 90px #0006;backdrop-filter:blur(8px)}
 #game::before{content:"";position:absolute;inset:-5px;background-image:linear-gradient(#071a16a8,#071a16b8),var(--game-venue-image,var(--venue-image));background-size:cover;background-position:center;filter:blur(2px)}
 #table{position:relative;margin-inline:auto;max-width:min(1240px,120dvh);box-shadow:0 0 55px #0008}
}