/* The app is behind the handset. The foreground frame defines the visible opening.
   Expanded source: 887×1774. LCD backplate x211 y302 w462 h495; aperture is smaller.
   This overscan guarantees a filled opening at every size without painting the bezel. */
.phone-art,.dialog-handset{
  clip-path:none;
  mask:url('/assets/handset-3210-mask.svg') center / 100% 100% no-repeat;
  -webkit-mask:url('/assets/handset-3210-mask.svg') center / 100% 100% no-repeat;
}
.brand img{margin-right:0}
.header-actions{display:flex;align-items:center;gap:10px}
.page-footer a{pointer-events:auto}
.footer-links{display:flex;align-items:center;gap:24px}
.footer-links a{display:inline-flex;align-items:center;min-height:24px;text-decoration:none;white-space:nowrap}
.status-links{display:flex;align-items:center;gap:10px}
.status-bar .signal{display:block;flex:0 0 30px;width:30px;height:16px;fill:currentColor;shape-rendering:crispEdges}
.lcd-docs{display:none;font-size:12px;letter-spacing:0;padding:3px 0}
.lcd-stats{display:none;font-size:12px;letter-spacing:0;padding:3px 0}
.lcd-stats:hover{text-decoration:underline;text-underline-offset:3px}
@media(max-width:700px),(max-height:780px){.lcd-docs,.lcd-stats{display:inline-block}}
.lcd-docs:hover,.page-footer a:hover{text-decoration:underline;text-underline-offset:3px}
.community-link{text-decoration:underline;text-underline-offset:3px}
.community-caption{display:block;margin-top:5px;font-size:10px;font-weight:normal;line-height:1.3}
.margin-note p,.right-note p{font:23px/1.25 Arial,sans-serif;letter-spacing:-.6px;margin:0 0 22px}
.margin-note small,.right-note small{font:12px/1.7 var(--mono);letter-spacing:0;color:var(--muted)}
.softkeys #soft-center{font-size:14px}
/* Equal columns keep MENU centered when the outer action labels change. */
.softkeys{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:center}
.softkeys button{min-width:0;width:100%;text-align:center}
.softkeys #soft-left{text-align:left}
.softkeys #soft-right{text-align:right}
.lcd-social{display:none;font-size:12px;letter-spacing:0;padding:3px 4px;text-decoration:none}
.lcd-social:hover{background:var(--ink);color:var(--lcd)}
@media(max-width:700px),(max-height:780px){.lcd-social{display:inline-block}}
.dialog-handset{display:none;pointer-events:none}
.lcd{container-type:size;container-name:lcd}
.lcd::before,dialog::before{content:none}
/* Keep overflow usable without introducing browser chrome into the LCD. */
.lcd,.lcd *{scrollbar-width:thin;scrollbar-color:var(--ink) var(--lcd)}
@supports selector(::-webkit-scrollbar){
  .lcd,.lcd *{scrollbar-width:auto;scrollbar-color:auto}
  .lcd::-webkit-scrollbar,.lcd *::-webkit-scrollbar{width:6px;height:6px}
  .lcd::-webkit-scrollbar-track,.lcd *::-webkit-scrollbar-track{background:transparent}
  .lcd::-webkit-scrollbar-thumb,.lcd *::-webkit-scrollbar-thumb{
    background:var(--ink);border:1px solid var(--lcd);border-radius:0;min-height:24px;
  }
  .lcd::-webkit-scrollbar-button,.lcd *::-webkit-scrollbar-button{display:none;width:0;height:0}
  .lcd::-webkit-scrollbar-corner,.lcd *::-webkit-scrollbar-corner{background:transparent}
}
@media(min-width:701px) and (min-height:781px){
  .stage{overflow:visible}
  .handset{
    --frame-width:min(1250px,calc(91.538svh - 91.538px),135vw);
    width:var(--frame-width);aspect-ratio:887/1774;
    top:calc(12px - 80px - var(--frame-width) * .0698985344);
    z-index:3;pointer-events:none;
  }
  .phone-art{position:absolute;inset:0;z-index:3;display:block}
  .lcd{
    left:23.78804961%;top:17.02367531%;width:52.08568207%;height:27.90304397%;
    border-radius:0;clip-path:none;box-shadow:none;z-index:1;pointer-events:auto;
    padding:20px 22px 14px;
  }
  .lcd .screen{padding-top:7px}
  .status-bar{padding-bottom:5px;font-size:13px}
  .status-bar button{font-size:12px}
  .softkeys{margin-top:5px;padding-top:5px;border-top-width:1px}
  .softkeys button{font-size:13px;min-height:22px}
  .physical-keys{display:block;inset:0;width:100%;height:100%;pointer-events:none;z-index:4}
  .physical-keys button{position:absolute;pointer-events:auto}
  #physical-right{left:22%;top:49.6%;width:13%;height:5.6%;border-radius:40%}
  #physical-left{left:39.5%;top:49.2%;width:21%;height:5.4%;border-radius:45%}
  #physical-up{left:68.1%;top:50.2%;width:8.1%;height:4.2%;border-radius:45%}
  #physical-down{left:59.8%;top:54.1%;width:9.7%;height:5%;border-radius:45%}
  dialog{overflow:visible;padding:14px 18px;clip-path:none!important;border-radius:0!important}
  #dialog-content{overflow-y:auto;overscroll-behavior:contain;gap:8px;position:relative}
  .dialog-handset{display:block;position:fixed;z-index:25;max-width:none;max-height:none}
  #dialog-title{font-size:20px;margin:0}
  .dialog-actions{position:sticky;bottom:0;background:var(--lcd);padding-top:6px;z-index:1}
  .wallet-readout{padding:5px 0;gap:3px}
  .wallet-readout strong{font-size:23px}
  .forever-title{font-size:25px!important}
  .dialog-notice{z-index:20;bottom:45px;left:18px;right:18px}
}
@container lcd (min-aspect-ratio:1.2/1){
  .home-view{display:grid;grid-template-columns:32% 1fr;grid-template-rows:auto auto 1fr auto;column-gap:14px;row-gap:4px;align-content:center}
  .home-title{grid-column:1;grid-row:1/5;min-height:0;justify-content:center}
  .home-title img{width:52px;height:52px}
  .home-title h1{font-size:33px;letter-spacing:-2px}
  .home-title p{font-size:12px;line-height:1.3;margin:7px 0 0}
  .readout{grid-column:2;font-size:12px;margin:0;align-items:center}
  .home-progress{grid-column:2;font-size:11px;margin:0}
  .home-menu{grid-column:2;align-content:center;gap:5px}
  .home-menu button{font-size:14px;padding:9px 7px}
  .home-menu button span{font-size:11px}
  .home-hint{grid-column:2;font-size:10px;margin:1px 0;line-height:1.2;letter-spacing:0}
  .game-view{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);grid-template-rows:auto auto 1fr auto;gap:7px 12px}
  .game-view .view-heading{grid-column:1/3}
  .view-heading h1{font-size:19px}
  .game-score{font-size:21px}
  .qualification{grid-column:2;grid-row:2;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:8px;line-height:1.4;font-size:12px}
  .game-board{grid-column:1;grid-row:2/5;min-height:0;overflow:visible}
  .game-board canvas{width:100%;height:100%;border:0}
  .touch-controls{grid-column:2;grid-row:3;display:grid;grid-template-columns:repeat(4,1fr);align-content:center;gap:4px}
  .touch-controls button{min-width:0;min-height:32px;padding:0;font-size:20px}
  .game-instruction{grid-column:2;grid-row:4;font-size:11px;text-align:left;line-height:1.4}
  .game-message{width:100%;max-height:100%;overflow-y:auto;padding:7px;box-shadow:3px 3px 0 #26351c44}
  .game-message h2{font-size:15px;letter-spacing:-.5px;margin:0 0 5px}
  .game-message p{font-size:11px;line-height:1.25;margin:5px 0}
  .game-message button.action{padding:6px;font-size:12px;margin-top:2px}
  .coil-view{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(90px,1fr);grid-template-rows:auto auto minmax(0,1fr);gap:5px 12px}
  .coil-view .view-heading,.coil-tabs{grid-column:1/3}
  .coil-tabs button{font-size:12px;padding:4px}
  .coil-content{grid-column:1;grid-row:3;justify-content:flex-start;overflow-y:auto;overscroll-behavior:contain;padding-right:2px}
  .claim-row{grid-column:2;grid-row:3;flex-direction:column;align-items:stretch;justify-content:center;gap:12px;border-top:0;border-left:1px solid var(--ink);padding:0 0 0 10px}
  .claim-row strong{font-size:19px;letter-spacing:-.5px;overflow-wrap:anywhere}
  .claim-row .label{font-size:11px;line-height:1.4}
  .estimate-note{display:none}
  .stake-form,.position-view{gap:5px;flex-shrink:0}
  .label,.form-foot .micro{font-size:11px}
  .stake-form>.between:first-child .micro{font-size:10px}
  .amount-entry{padding:4px 6px;border-width:1px}
  .amount-entry input{font-size:20px}
  .estimate-grid{margin-top:0;gap:4px}
  .estimate-grid strong{font-size:17px;margin-top:1px}
  .estimate-grid .label{font-size:10px}
  .terms{font-size:11px;line-height:1.3}
  .form-foot{display:flex;gap:4px;flex-wrap:wrap}
  .form-foot>.micro{display:none}
  .lcd button.action,.lcd button.secondary{font-size:12px;padding:6px}
  .position-amount{font-size:23px}
  .position-amount small,.position-meta{font-size:11px}
  .expiry-clock{font-size:17px}
  .expiry-note{font-size:11px}
  .position-pager{gap:4px}
  .position-pager button{font-size:16px;width:20px}
  .position-view>.between:first-child{flex-wrap:wrap}
  .permanent-note{font-size:13px;line-height:1.4;padding:3px 0}
  .permanent-note span{font-size:11px}
  .toast{left:10px;right:10px;bottom:34px;font-size:12px;padding:8px}
}
/* The enlarged, almost-square LCD uses the main stacked layouts. */
.swipe-instruction{display:none}
.touch-playing .keyboard-instruction{display:none}
.touch-playing .swipe-instruction{display:inline}
@media(pointer:coarse){
  .keyboard-instruction{display:none}
  .swipe-instruction{display:inline}
}
.game-board{touch-action:none;user-select:none;-webkit-user-select:none}
.touch-controls button{touch-action:manipulation}
.lcd:has(.game-view[data-playing="true"])>.toast{display:none;pointer-events:none}
@container lcd (max-aspect-ratio:1.2/1) and (max-height:450px){
  .home-title{min-height:75px}
  .home-title img{width:52px;height:52px}
  .home-title h1{font-size:39px;letter-spacing:-2px}
  .home-title p{margin:6px 0 10px}
  .readout{margin:6px 0}
  .home-progress{margin:4px 0 10px}
  .home-hint{margin:9px 0 4px;font-size:11px}
  .home-menu button{padding:8px 10px;font-size:17px}
  .coil-view,.position-view{gap:6px}
  .coil-content{overflow-y:auto;justify-content:flex-start;overscroll-behavior:contain}
  .stake-form,.position-view{flex-shrink:0}
  .coil-tabs button{padding:5px}
  .stake-form{gap:5px}
  .amount-entry{padding:4px 8px}
  .amount-entry input{font-size:23px}
  .estimate-grid strong{font-size:20px}
  .claim-row{padding-top:6px}
  .claim-row strong{font-size:23px}
  .estimate-note{display:none}
  .permanent-note{padding:4px 0}
  .lcd button.action,.lcd button.secondary{padding:7px}
  .game-view{gap:6px}
  .touch-controls button{min-height:30px}
  .game-instruction{font-size:11px}
  .game-message{padding:10px;max-height:100%;overflow-y:auto}
  .game-message h2{font-size:19px;margin-bottom:7px}
  .game-message p{font-size:12px;line-height:1.3;margin:5px 0}
}
/* Keep the application usable when there isn't enough height for the faceplate. */
@media(max-height:780px){
  .page-header,.page-footer,.phone-art,.physical-keys,.dialog-handset{display:none}
  .stage{height:100svh;overflow:hidden}
  .handset{position:static;width:100%;height:100%;aspect-ratio:auto;transform:none}
  .lcd{position:absolute;inset:0;margin:auto;width:min(100%,540px);height:100%;border-radius:0;clip-path:none;box-shadow:none;padding:12px 22px;pointer-events:auto}
}