.opening-exercise .progress{width:100%;margin:18px 0 28px}
.opening-exercise h1{font-size:clamp(28px,3.5vw,42px)}
.opening-layout{display:grid;grid-template-columns:minmax(240px,420px) minmax(0,1fr);gap:32px;max-width:1000px;margin:24px auto;align-items:start}
.opening-bid{background:#fff;border:2px solid #fff;border-radius:9px;padding:10px 4px;font-size:24px;color:#005d35;min-height:48px}
.opening-black{color:#111}.opening-red{color:#c40000}
.opening-bid:disabled{opacity:.28;cursor:default}.opening-pass{grid-column:span 3}
.opening-bid.correct{opacity:1;background:#e8ffbf;border-color:#c7f67d}.opening-bid.wrong{opacity:1;background:#ffe3e1;border-color:#ffbdb7}
#opening-feedback{font-size:20px;line-height:1.6}
.opening-dialog{border:2px solid #fff;border-radius:16px;background:#006b00;color:#fff;width:min(94vw,680px);padding:24px}
.opening-dialog::backdrop{background:#0008}.opening-dialog[open]{animation:opening-fade .15s ease-out}.opening-dialog form{margin-top:22px}
@keyframes opening-fade{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.opening-dialog[open]{animation:none}}
@media(max-width:700px){.opening-layout{grid-template-columns:1fr;gap:20px}.opening-layout aside{grid-row:1}.bidpicker{margin:0 auto}.opening-bid{font-size:21px}.opening-dialog{padding:16px}}

/* Kompakt budväljare */
.bidpicker{max-width:420px}
.bp-head{display:flex;align-items:center;justify-content:space-between;min-height:34px;margin:0 0 8px;font-size:14px}
.bp-arrows{display:flex;gap:6px}
.bp-arrow{width:42px;height:34px;padding:0;border:2px solid #ffffffa6;border-radius:8px;background:transparent;color:#fff;font-size:24px;font-weight:700;line-height:1;cursor:pointer}
.bp-arrow:hover:not(:disabled){background:#ffffff1f;border-color:#fff}
.bp-arrow:disabled{opacity:.3;cursor:default}
.bp-viewport{position:relative;overflow:hidden;height:58px;margin:-3px -3px 5px;touch-action:none}
.bp-row{position:absolute;inset:3px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;will-change:transform}
.bp-row .opening-bid{min-height:0}
.bp-fixed{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.bp-fixed .opening-bid{min-height:52px}

/* Fusklapp som tabell */
.opening-cheat{width:100%;max-width:600px;border-collapse:collapse;background:#fff;color:#111;text-align:center;font-size:19px;border-radius:8px;overflow:hidden}
.opening-cheat th{background:linear-gradient(#eaf6fe,#cde5f5);color:#0b2a40;padding:9px 6px;font-size:18px;font-weight:700}
.opening-cheat td{padding:8px 6px;border-top:1px solid #d9e5ee;font-weight:700}
.opening-cheat td:first-child{width:28%}
.opening-cheat-note{font-size:15px;line-height:1.5;margin:10px 0 0;max-width:600px}

/* Mobil: kompakt fusklapp så att hand, fusklapp och budväljare får plats på samma skärm */
@media(max-width:700px){
.opening-layout{gap:10px;margin:10px auto}
.opening-layout aside h2{font-size:17px;margin:0 0 6px}
.opening-cheat{font-size:14px;max-width:340px;border-radius:6px}
.opening-cheat th{padding:4px 4px;font-size:12.5px}
.opening-cheat td{padding:2px 4px}
.opening-cheat .hd,.opening-cheat .bd{font-size:1.05em!important}
.opening-cheat-note{font-size:12.5px;line-height:1.35;margin:6px 0 0}
.opening-dialog .opening-cheat{font-size:16px;max-width:none}
.opening-dialog .opening-cheat td{padding:5px 4px}
.opening-dialog .opening-cheat th{padding:6px 4px;font-size:14px}
}

/* Fusklapp som sidopanel på mobil. På dator syns fusklappen på sin vanliga plats och panelen finns inte. */
.cheat-tab,.cheat-drawer,.cheat-backdrop,.cheat-hint{display:none}
@media(max-width:700px){
.opening-layout aside{display:none}
.cheat-hint{display:block;margin-top:6px}
.cheat-backdrop{display:block;position:fixed;inset:0;background:rgba(0,0,0,.38);opacity:0;pointer-events:none;transition:opacity .24s ease;z-index:40}
.cheat-backdrop.open{opacity:1;pointer-events:auto}
.cheat-drawer{display:block;position:fixed;top:0;right:0;bottom:0;width:88vw;box-sizing:border-box;padding:16px 16px 24px;background:#006b00;color:#fff;border-left:2px solid #fff;box-shadow:-10px 0 28px rgba(0,0,0,.4);overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;transform:translateX(106%);transition:transform .26s cubic-bezier(.22,.8,.3,1);z-index:41}
.cheat-drawer.open{transform:translateX(0)}
.cheat-drawer-head{display:flex;align-items:center;justify-content:space-between;margin:0 0 12px}
.cheat-drawer-head h2{margin:0;font-size:22px}
.cheat-close{width:40px;height:40px;padding:0;border:2px solid #fff;border-radius:10px;background:transparent;color:#fff;font-size:18px;line-height:1;cursor:pointer}
.cheat-drawer .opening-cheat{font-size:16px;max-width:none}
.cheat-drawer .opening-cheat th{padding:7px 4px;font-size:14px}
.cheat-drawer .opening-cheat td{padding:6px 4px}
.cheat-drawer .opening-cheat-note{font-size:14px;line-height:1.45;margin:12px 0 0}
.cheat-tab{display:block;position:fixed;right:0;top:48%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;width:19px;height:118px;padding:0;border:2px solid #fff;border-right:0;border-radius:10px 0 0 10px;background:#0b7a0b;color:#fff;font-size:11px;font-weight:700;letter-spacing:.04em;touch-action:none;cursor:pointer;z-index:30}
.cheat-tab span{writing-mode:vertical-rl}
.cheat-tab-icon{flex:0 0 auto}
#opening-help{display:none}
}
@media(prefers-reduced-motion:reduce){.cheat-drawer,.cheat-backdrop{transition:none}}