/* Production phone viewport: browser chrome belongs to the browser. */
html{--app-height:100vh;--viewport-top:0px;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--header-height:calc(56px + var(--safe-top));--nav-height:calc(58px + var(--safe-bottom))}
@supports(height:100svh){html{--app-height:100svh}}
html:has(body:not(.gate-page)){height:100%;overflow:hidden}
body:not(.gate-page){margin:0;padding:0;min-height:0;height:100%;overflow:hidden;overscroll-behavior-y:none;-webkit-text-size-adjust:100%;text-size-adjust:100%}
.phone{position:fixed;top:var(--viewport-top);inset-inline:0;width:100%;max-width:440px;height:var(--app-height);min-height:0;margin:0 auto;border:0;outline:0;border-radius:0;box-shadow:none;overflow:hidden}
.phone>.status,.phone>.home-line{display:none!important}
.phone>header{position:absolute;inset:0 0 auto;height:var(--header-height);padding:var(--safe-top) 16px 0;z-index:10;background:#101911}
.wallpaper-mode>header{position:absolute;background:transparent}
.scene,.viewer{inset:var(--header-height) 0 0}
.scene.done{height:auto;overflow-y:auto}
.entry{padding:16px 17px 24px;bottom:var(--nav-height);scroll-padding-bottom:20px;-webkit-overflow-scrolling:touch}
.entry-nav{bottom:0;min-height:var(--nav-height);padding:8px 16px calc(8px + var(--safe-bottom));align-items:center}
.entry-nav button{min-height:40px}
.viewer{inset:var(--header-height) 0 0;overflow:hidden}
.viewer-actions{padding-bottom:calc(12px + var(--safe-bottom))}
.favorites-body{padding-bottom:calc(20px + var(--safe-bottom))}
#choice{inset:var(--header-height) 0 0;overflow-y:auto;padding-bottom:calc(16px + var(--safe-bottom));-webkit-overflow-scrolling:touch}
.options{position:relative;inset:auto;width:calc(100% - 24px);margin:24px auto;padding:27px 20px}
.loader{overflow-y:auto;padding:20px 16px calc(20px + var(--safe-bottom))}
.loader .mascot{flex:0 0 auto;width:min(260px,75%);height:clamp(150px,30vh,270px)}
.loader h2,.loader p{flex:0 0 auto}.loader .cancel{flex:0 0 auto;margin-top:20px}
.download-panel{max-height:calc(var(--app-height) - var(--safe-top) - var(--safe-bottom) - 32px);overflow-y:auto}
.download-overlay{padding-top:var(--safe-top);padding-bottom:var(--safe-bottom)}
.wallpaper-mode #deck .deck-head{top:calc(var(--header-height) + 12px);left:18px;right:18px}
.wallpaper-mode #deck .lock-clock{top:calc(var(--header-height) + 64px);font-size:clamp(44px,14vw,62px)}
.wallpaper-mode #deck .deck-controls{position:absolute;z-index:4;left:18px;right:18px;bottom:calc(12px + var(--safe-bottom));display:flex;flex-direction:column;align-items:center;gap:9px}
.wallpaper-mode #deck .deck-controls .original-button{position:static;inset:auto;transform:none;margin:0;min-height:32px;max-width:100%;padding:6px 14px}
.wallpaper-mode #deck .deck-controls .gestures{position:static;inset:auto;transform:none;width:min(280px,100%);max-width:100%;margin:0;gap:10px}
.wallpaper-mode #deck .deck-controls .action{min-height:40px;font-size:12px}
.wallpaper-mode #deck .deck-controls .reset{position:static;inset:auto;transform:none;margin:0;min-height:28px;max-width:100%;white-space:normal;text-align:center;padding:4px 8px}
.wallpaper-mode #deck .counter,.desktop-mode #deck .counter{bottom:calc(var(--deck-controls-height,118px) + var(--safe-bottom) + 28px)}
.wallpaper-mode .toast{bottom:calc(var(--deck-controls-height,118px) + var(--safe-bottom) + 70px)}
/* Candidate cards keep a real portrait ratio; short screens scroll the scene. */
.a-tournament{display:block;padding:17px 18px calc(20px + var(--safe-bottom));overflow-y:auto;-webkit-overflow-scrolling:touch}
.round-track{margin:0 0 13px}.a-round-label{margin:0 0 9px;font-size:11px;line-height:1.6}.a-tournament h1{font-size:clamp(20px,5.8vw,25px);line-height:1.4;margin:0 0 20px}
.a-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:12px;flex:none;min-height:0;max-height:none;height:auto}
.a-pick{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;align-content:start;gap:10px;width:100%;height:auto;min-height:0;min-width:0;padding:0;border:0;appearance:none;-webkit-appearance:none}
.a-phone{display:block;flex:none;position:relative;width:100%;height:auto;min-height:0;aspect-ratio:9/16;border-radius:20px}
.a-phone img,.a-phone video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.a-candidate-clock{top:13%;font-size:clamp(25px,8.1vw,35px)}.a-candidate-clock small{font-size:8px;line-height:1.7}
.a-pick-label{height:auto;min-height:44px;padding:11px 7px;font-size:13px;line-height:1.5;overflow-wrap:anywhere}
.a-browse{display:block;margin:15px auto 0;padding:12px;min-height:40px;max-width:100%;white-space:normal;line-height:1.5}
.a-desktop-pair .a-pick{height:auto}.a-desktop-pair .a-phone{height:auto;min-height:0;aspect-ratio:16/9;border-radius:9px}
@supports not(aspect-ratio:9/16){.a-phone{height:0;padding-top:177.7778%}.a-desktop-pair .a-phone{height:0;padding-top:56.25%}}
/* Champion controls form one bottom group instead of separate pixel anchors. */
.a-champion{inset:0}
.a-champion-title{top:calc(var(--header-height) + 13px);font-size:17px;line-height:1.5}
.a-champion-clock{top:calc(var(--header-height) + 58px);font-size:clamp(44px,14vw,62px);line-height:1.1}
.a-champion-clock small{font-size:12px;line-height:1.9}
.a-champion-actions{bottom:calc(14px + var(--safe-bottom));left:18px;right:18px;gap:9px;padding:2px;max-height:calc(var(--app-height) - var(--header-height) - var(--safe-bottom) - 24px);overflow-y:auto;scrollbar-width:none;overscroll-behavior:contain}
.a-position{flex:0 0 auto;min-height:32px;margin:0}.a-mode-tabs{flex:0 0 auto;max-width:100%;margin:0}.a-mode-tabs button{min-height:34px;line-height:1.5;white-space:normal}
.a-download{flex:0 0 auto;min-height:48px;padding:12px;line-height:1.5;white-space:normal}
.a-small-actions{flex:0 0 auto;gap:8px}.a-small-actions button{min-height:40px;padding:9px 6px;line-height:1.5;overflow-wrap:anywhere}
.a-crop-panel{flex:0 0 auto}.a-home-icons{top:calc(var(--header-height) + 175px);grid-auto-rows:auto;gap:19px}
.a-champion.crop-open .a-champion-clock,.a-champion.crop-open .a-champion-title{visibility:hidden}
.a-champion.crop-open .a-position,.a-champion.crop-open .a-mode-tabs{display:none}
@media(max-height:570px){.a-tournament{padding-top:13px}.round-track{margin-bottom:10px}.a-tournament h1{margin-bottom:16px}.a-browse{margin-top:10px}.a-champion-title{font-size:15px}.a-champion-clock,.wallpaper-mode #deck .lock-clock{font-size:46px;top:calc(var(--header-height) + 52px)}.a-champion-actions{gap:7px;bottom:calc(10px + var(--safe-bottom))}.a-position{min-height:29px;padding:5px 12px}.a-mode-tabs button{min-height:29px;padding:5px 9px}.a-download{min-height:43px;padding:9px 10px}.a-small-actions button{min-height:36px;padding:7px 5px;font-size:11px}.a-home-icons{top:calc(var(--header-height) + 145px);gap:13px}.a-home-icons svg{width:38px;height:38px;padding:9px}}
@media(max-height:420px){.a-champion-title{font-size:13px;top:calc(var(--header-height) + 6px)}.a-champion-clock,.wallpaper-mode #deck .lock-clock{font-size:36px;top:calc(var(--header-height) + 34px)}.a-champion-clock small,.lock-date{font-size:10px}.a-champion-actions{gap:5px}.a-position{min-height:25px;padding:3px 10px}.a-mode-tabs{padding:2px}.a-mode-tabs button{min-height:25px;padding:3px 8px}.a-download{min-height:36px;padding:7px}.a-small-actions button{min-height:31px;padding:5px}.a-home-icons{display:none}.options{margin:10px auto}.loader .mascot{height:110px}.loader{padding-top:8px}.loader h2{font-size:18px;margin:6px}.loader .cancel{margin-top:12px}}
