/* Round 5b: sheets, Your Dice, 44px Bubble taps, iPad columns. */

.r5-host{position:fixed;left:0;right:0;bottom:0;height:0;z-index:62;pointer-events:none}
.r5-yd,.r5-scrim{pointer-events:auto}
.r5-scrim{position:fixed;inset:0;z-index:64;background:rgba(4,8,14,.72);display:flex;align-items:flex-end;justify-content:center}
.r5-sheet{width:min(560px,100%);max-height:min(86vh,760px);overflow:auto;background:#141A22;color:#F6EDD8;border-radius:18px 18px 0 0;padding:14px 14px 18px;border:1px solid rgba(201,169,97,.45)}
.r5-sheet h1{margin:0;font:800 22px/1.2 Georgia,serif}
.r5-sheet small{letter-spacing:.12em;font:700 10px/1 Archivo,sans-serif;color:#C9A961}
.r5-x{position:absolute;right:12px;top:10px;width:44px;height:44px;border-radius:12px;border:1px solid rgba(201,169,97,.5);background:transparent;color:#fff;font-size:22px}
.r5-head{position:relative;padding-right:48px}
.r5-note{font:600 13px/1.4 Archivo,sans-serif;color:#E6E0D4}
.r5-chart svg{width:100%;height:auto;background:#0c141c;border-radius:12px}
.r5-chart text{fill:#C8D3E2;font:600 10px Archivo,sans-serif}
.r5-row,.r5-btn,.r5-seg button,.r5-pairs button,.r5-keypad button,.yd-face{min-height:44px;min-width:44px}
.r5-seg{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.r5-seg button,.r5-btn{border-radius:12px;border:1px solid rgba(226,188,98,.4);background:#1c2a3c;color:#F6EDD8;padding:8px 10px;font:800 12px/1.2 Archivo,sans-serif}
.r5-seg button.on,.r5-btn.go{background:linear-gradient(#FFE7A0,#E2BC62);color:#2A1A00}
.r5-seg button.on small{color:#2A1A00}
.r5-check{display:flex;align-items:center;gap:10px;min-height:44px;margin:8px 0;color:#F6EDD8;font:700 14px/1.3 Archivo,sans-serif}
.r5-check input{width:24px;height:24px;min-width:24px;min-height:24px;accent-color:#E2BC62}
.r5-legend{list-style:none;display:flex;gap:14px;margin:6px 0;padding:0}
.r5-legend li{display:flex;align-items:center;gap:6px;min-height:24px;color:#E6EDF6;font:600 12px/1.2 Archivo,sans-serif}
.r5-legend i{display:block;width:28px;height:0;border-top:3px solid #7EB6FF}
.r5-legend i.dash{border-top-style:dashed;border-top-color:#E2BC62}
.r5-table{width:100%;border-collapse:collapse;margin:8px 0;color:#F6EDD8;font:600 13px/1.3 Archivo,sans-serif}
.r5-table th,.r5-table td{text-align:left;padding:6px;border-bottom:1px solid rgba(255,255,255,.12)}
.r5-preview{margin:2px 0;color:#E6EDF6;font:600 12px/1.3 Archivo,sans-serif}
.r5-yd{position:fixed;left:8px;right:8px;bottom:200px;z-index:62;max-height:min(200px,calc(100dvh - 280px));overflow:auto;background:#141A22;color:#F6EDD8;border-radius:16px 16px 0 0;border:1px solid rgba(201,169,97,.45);padding:8px 10px 10px}
.r5-pairs button,.yd-face,.r5-faces button{border-radius:12px;border:1px solid rgba(226,188,98,.4);background:#1c2a3c;color:#F6EDD8;font:800 13px/1.2 Archivo,sans-serif}
.r5-diepad{display:none}
.r5-faces{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}
.roll-btn.yd,.tc-shoot.yd{background:radial-gradient(90% 70% at 50% 30%,#1AA896,#0E6E62 55%,#064840);color:#E9FFF8;box-shadow:inset 0 0 0 2px #6FE3D0,0 8px 18px rgba(0,0,0,.55)}
.tc-shoot.pso-clear,.roll-btn.pso-clear{position:relative;z-index:72}
.tc-menu{overflow:auto}
.tc-menu>button,.tc-menu>a,.tc-menu .r5-row,.tc-menu>label.tc-toggle{min-height:44px;flex:0 0 auto;display:flex;align-items:center;width:100%;text-align:left;margin:4px 0;padding:8px 12px;background:#101820;color:#fff;border-radius:12px;border:1px solid rgba(255,255,255,.08);font:800 13px/1.2 Archivo,sans-serif;text-decoration:none;box-sizing:border-box}
.tc-menu>label.tc-toggle{justify-content:space-between;gap:8px}
.tc-menu>label.tc-toggle button{min-height:44px;min-width:44px;height:44px;flex:0 0 auto}
.tc-edge{position:absolute;left:0;top:40%;z-index:5;min-height:44px;min-width:44px;padding:8px 6px;border-radius:0 12px 12px 0;border:1px solid rgba(255,211,106,.5);border-left:0;background:#141A22;color:#FFD36A;font:800 11px/1.1 Archivo,sans-serif;letter-spacing:.08em}
.tc-ipad-shooter{display:none;min-height:0;overflow:auto}
.r5-row{display:flex;width:100%;text-align:left;gap:8px;align-items:center;margin:4px 0;background:#101820;color:#fff;border-radius:12px;border:1px solid rgba(255,255,255,.08);padding:8px}
.r5-sum{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:8px 0}
.r5-sum b{display:block;font:800 16px/1.2 Archivo,sans-serif}
.r5-sum small{display:block}
.r5-banner{display:flex;align-items:center;min-height:44px;padding:6px 10px;border-radius:12px;background:#062320;color:#6FE3D0;font:800 12px/1.2 Archivo,sans-serif;letter-spacing:.04em}
.r5-yours{display:inline-flex;align-items:center;min-height:22px;padding:0 6px;border-radius:999px;background:#062320;color:#6FE3D0;font:800 10px/1 Archivo,sans-serif}
.r5-pairs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.r5-keypad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.r5-qstrip{display:flex;gap:6px;margin:6px 0}
.r5-qstrip button{flex:1;min-height:44px;border-radius:12px;border:1px solid rgba(226,188,98,.45);background:#102033;color:#F6EDD8;font:800 11px/1.2 Archivo,sans-serif}
.r5-lock{opacity:.55}

/* Bubble chrome taps. The 320 zoom column and the landscape HUD row keep their fitted sizes. */
@media (min-width: 360px) {
  .app.play .chip-btn,
  .app.play .press-btn,
  .app.play .key,
  .app.play .switch,
  .app.play .btab,
  .app.play .step,
  .app.play .mode-switch button,
  .app.play .setting button,
  .app.play .seg button,
  .app.play .trackseg button,
  .app.play .undo button,
  .app.play .cta,
  .app.play .ghost,
  .app.play .fairchip,
  .app.play .numbox,
  .app.play .spot {
    min-width: 44px;
    min-height: 44px;
  }
}
@media (min-width: 360px) and (min-height: 700px) and (orientation: portrait) {
  .app.play .hud-row1 { height: 44px; }
  .app.play .homebtn,
  .app.play .homebtn img,
  .app.play .homebtn img.home-avatar {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }
  .app.play .felt.bfx.lay-tall.mode-regular {
    grid-template-rows: 16px 48px 104px var(--hit) 44px minmax(0, 1fr) 44px;
  }
  .app.play .felt.bfx.lay-tall.mode-crapless {
    grid-template-rows: 16px 48px 156px var(--hit) 44px minmax(0, 1fr) 44px;
  }
  .app.play .felt.bfx .passline .spot,
  .app.play .felt.bfx .fieldband .spot,
  .app.play .felt.bfx .ats .spot,
  .app.play .autoswipe,
  .app.play [data-act="for"],
  .app.play [data-act="toast-go"] {
    min-width: 44px;
    min-height: 44px;
  }
  .app.play .felt.bfx .passline .spot,
  .app.play .felt.bfx .fieldband .spot,
  .app.play .felt.bfx .ats .spot { height: auto; }
}
@media (min-width: 1024px), (min-width: 768px) and (min-height: 900px) {
  .app.play { max-width: none; width: 100%; }
  .app.play button,
  .app.play .spot,
  .app.play .chip-btn,
  .app.play .key,
  .app.play .press-btn,
  .app.play .homebtn,
  .app.play .homebtn img,
  .app.play .dot,
  .app.play .edgepill,
  .app.play .felt.bfx .passline .spot,
  .app.play .felt.bfx .fieldband .spot,
  .app.play .felt.bfx .ats .spot {
    min-width: 48px;
    min-height: 48px;
  }
  .app.play .felt.bfx.lay-tall.mode-regular {
    grid-template-rows: 16px 52px max(124px, calc(124px / var(--felt-k, 1))) var(--hit) 48px minmax(0, 1fr) 48px;
  }
  .app.play .felt.bfx.lay-tall.mode-crapless {
    grid-template-rows: 16px 52px max(156px, calc(124px / var(--felt-k, 1))) var(--hit) 48px minmax(0, 1fr) 48px;
  }
  .app.play .felt.bfx .passline .spot,
  .app.play .felt.bfx .fieldband .spot,
  .app.play .felt.bfx .ats .spot { height: auto; }
  .app.play .pager {
    display: grid;
    width: 100%;
    height: 100%;
    grid-template-columns: 1fr 1fr;
    transform: none !important;
    transition: none !important;
  }
  .app.play .pager .page { width: auto; min-width: 0; height: 100%; }
  .app.play .pager .page.side { display: none; }
  .app.play .felt.bfx.mode-regular .numbox { grid-template-rows: 16px minmax(calc(44px / var(--felt-k, 1)), auto) minmax(18px, 1fr) minmax(calc(44px / var(--felt-k, 1)), auto); }
  .app.play .felt.bfx.mode-crapless .numbox { grid-template-rows: minmax(calc(44px / var(--felt-k, 1)), auto) minmax(18px, 1fr) minmax(calc(44px / var(--felt-k, 1)), auto); }
  .app.play .felt.bfx .numbox .half.place,
  .app.play .felt.bfx .numbox .half.buy { min-height: calc(44px / var(--felt-k, 1)); height: auto; }
  .app.play .felt.bfx .prop .spot { min-height: calc(44px / var(--felt-k, 1)); height: auto; }
}
@media (min-width: 1366px) {
  .app.play .pager { grid-template-columns: 1fr 1fr 1fr; }
  .app.play .pager .page.side { display: block; }
}
@media (min-width: 768px) and (min-height: 900px) and (orientation: portrait) {
  .tc-app.ipad-port {
    grid-template-rows: auto minmax(0,3fr) minmax(0,2fr) auto auto auto;
    grid-template-areas: "hud" "stage" "ipadshoot" "dock" "keys" "notice";
  }
  .tc-app.ipad-port .tc-dots { display: none; }
  .tc-app.ipad-port .tc-ipad-shooter { display: block; grid-area: ipadshoot; padding: 0 8px 4px; }
}
@media (min-width: 1024px) and (orientation: landscape) {
  .tc-app.ipad-land {
    grid-template-columns: 62% 38%;
    grid-template-rows: auto minmax(0,1fr) auto auto auto;
    grid-template-areas: "hud hud" "stage ipadshoot" "stage dock" "keys keys" "notice notice";
  }
  .tc-app.ipad-land .tc-dots { display: none; }
  .tc-app.ipad-land .tc-ipad-shooter { display: block; grid-area: ipadshoot; padding: 0 8px; }
}

/* PSO dip stays off ROLL / SHOOT and the dock. A side SHOOT is punched out in pso.mjs. */
.pso-dip{
  -webkit-mask-image: linear-gradient(#000 0, #000 calc(100% - 150px), transparent calc(100% - 88px));
  mask-image: linear-gradient(#000 0, #000 calc(100% - 150px), transparent calc(100% - 88px));
}
@media (max-height: 699px) {
  .r5-pairs { display: none; }
  .r5-diepad { display: block; }
}
/* Landscape phones put SETTLE in the side dock. Keep the sheet on the felt side. */
@media (max-height: 500px) and (orientation: landscape) {
  .app.play .r5-yd { right: 140px; bottom: 30px; max-height: calc(100dvh - 48px); }
  .tc-app .r5-yd { right: calc(var(--side, 252px) + 8px); bottom: 8px; max-height: calc(100dvh - 56px); }
  .tc-app.tight .r5-yd { right: calc(var(--side, 220px) + 8px); }
}
@media (max-width: 359px) {
  .r5-pairs button, .r5-faces button, .yd-face {
    min-height: calc(44px * 352px / 100vw);
    min-width: calc(44px * 352px / 100vw);
  }
  .app.play .r5-qstrip button { min-height: calc(44px * 352px / 100vw); }
}
/* Phones: Your Dice is a fixed sheet on the shooter page, above the dock, with the 12 face buttons in view. */
@media (max-width: 430px) {
  .tc-shooter .r5-yd {
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: 152px;
    top: auto;
    z-index: 63;
    max-height: calc(100dvh - 200px);
    margin: 0;
    overflow: auto;
  }
  .tc-shooter .r5-yd > .r5-note:first-of-type { display: none; }
  .tc-shooter .r5-faces button,
  .tc-shooter .yd-face { min-width: 0; min-height: 44px; }
}