/* Papa’s arcade: three browser games, used on the home page (#games) and on /games. Everything is scoped under .ar. Built by assets/games.js. */
.ar [hidden] { display: none !important; }
.ar .button-dark { background: var(--ink); color: var(--white); }
.ar .picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; width: min(920px, 100%); margin: 26px auto 18px; }
.ar .pick { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 12px; padding: 14px 16px; text-align: left; border: 2px solid var(--ink); border-radius: 16px; background: var(--white); transition: transform .15s, box-shadow .15s, background .2s; }
.ar .pick:hover { transform: translateY(-2px); box-shadow: 4px 5px 0 var(--ink); }
.ar .pick[aria-pressed="true"] { background: var(--orange); box-shadow: 4px 5px 0 var(--ink); }
.ar .pick-icon { grid-row: span 2; font-size: 2rem; line-height: 1; }
.ar .pick b { font-size: 1.02rem; letter-spacing: -.02em; }
.ar .pick small { font-size: .78rem; color: var(--muted); font-weight: 650; }
.ar .pick[aria-pressed="true"] small { color: var(--ink); }
.ar .pick .best { position: absolute; top: -10px; right: 10px; padding: 2px 8px; border-radius: 99px; background: var(--ink); color: var(--white); font-size: .68rem; font-weight: 850; }
.ar .pick .best:empty { display: none; }

/* The arcade: a Mac screen with Papa in its notch */
.ar .arcade { width: min(920px, 100%); margin: 0 auto; border: 10px solid var(--ink); border-radius: 26px; box-shadow: 8px 9px 0 rgba(25,32,41,.25); background: var(--ink); }
.ar .stage { position: relative; height: clamp(460px, 66vh, 600px); border-radius: 15px; overflow: hidden; background: #f3e5cf; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.ar .stage.shake { animation: ar-shake .35s; }
@keyframes ar-shake { 20% { transform: translate(-7px, 3px); } 40% { transform: translate(6px, -4px); } 60% { transform: translate(-4px, 2px); } 80% { transform: translate(3px, -1px); } }
.ar .notch { position: absolute; z-index: 8; top: 0; left: 50%; transform: translateX(-50%); width: 170px; height: 28px; display: flex; align-items: center; gap: 10px; padding: 0 14px; background: #000; color: #fff; border-radius: 0 0 16px 16px; overflow: hidden; transition: width .35s cubic-bezier(.2,.9,.25,1.1), height .35s cubic-bezier(.2,.9,.25,1.1), border-radius .35s; }
.ar .notch.open { width: min(94%, 440px); height: 82px; border-radius: 0 0 24px 24px; }
.ar .notch video, .ar .notch img { width: 64px; height: 64px; flex: none; object-fit: contain; opacity: 0; transition: opacity .2s .15s; }
.ar .notch.open video, .ar .notch.open img { opacity: 1; }
.ar .notch .say { opacity: 0; transition: opacity .2s .18s; min-width: 0; }
.ar .notch.open .say { opacity: 1; }
.ar .notch .say b { display: block; font-size: .95rem; line-height: 1.25; }
.ar .notch .say small { display: block; margin-top: 2px; font-size: .76rem; color: #a9adb0; }
.ar .area { position: absolute; inset: 0 0 46px 0; }
.ar .hud { position: absolute; left: 0; right: 0; bottom: 0; height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; background: var(--ink); color: var(--white); font-size: .86rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.ar .hud b { color: var(--orange); }
.ar .hud-mid { flex: 1; display: flex; justify-content: center; }
.ar .hud button { border: 1.5px solid #4a535c; background: none; border-radius: 8px; padding: 4px 9px; font-size: .78rem; font-weight: 800; color: var(--white); }

/* Start and result cards */
.ar .overlay { position: absolute; z-index: 7; inset: 0 0 46px 0; display: grid; place-items: center; padding: 90px 16px 16px; background: rgba(25,32,41,.6); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.ar .overlay[hidden] { display: none; }
.ar .card { width: min(100%, 460px); max-height: 100%; overflow: auto; padding: 22px; border: 2px solid var(--ink); border-radius: 20px; background: var(--paper); box-shadow: 6px 7px 0 var(--ink); text-align: center; animation: ar-pop .3s cubic-bezier(.2,.9,.25,1.2); }
@keyframes ar-pop { from { transform: scale(.9); opacity: 0; } }
.ar .card h2 { font-size: 1.7rem; letter-spacing: -.04em; margin: 4px 0 8px; }
.ar .card p { margin: 0 0 14px; line-height: 1.5; color: var(--muted); }
.ar .card .how { font-size: .86rem; font-weight: 700; color: var(--ink); background: var(--paper-dark); border-radius: 10px; padding: 8px 12px; }
.ar .card .big { font-size: 3rem; font-weight: 950; letter-spacing: -.05em; line-height: 1; margin: 6px 0 2px; color: var(--ink); }
.ar .card .big small { font-size: .38em; letter-spacing: 0; margin-left: 4px; }
.ar .card .vs { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; font-size: .82rem; font-weight: 800; margin: 8px 0 14px; color: var(--muted); }
.ar .card .vs b { color: var(--ink); }
.ar .card .row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.ar .card .row .button { flex: 1 1 130px; min-height: 46px; padding: 10px 14px; font-size: .88rem; }
.ar .verdict { display: flex; align-items: center; gap: 12px; text-align: left; margin-bottom: 8px; }
.ar .verdict .face { width: 72px; height: 72px; flex: none; border-radius: 50%; background: #000; overflow: hidden; border: 2px solid var(--ink); }
.ar .verdict .face video { width: 100%; height: 100%; }
.ar .verdict b { display: block; font-size: 1.05rem; line-height: 1.3; letter-spacing: -.01em; }
.ar .verdict small { display: block; color: var(--muted); font-size: .82rem; margin-top: 2px; }
.ar .plug { margin-top: 14px; padding: 12px; border-radius: 14px; background: var(--white); border: 1.5px dashed var(--ink); font-size: .84rem; line-height: 1.45; }
.ar .plug p { margin: 0 0 10px; color: var(--ink); font-weight: 650; }
.ar .plug .button { width: 100%; min-height: 44px; }
.ar .plug a.pro { display: inline-block; margin-top: 8px; font-size: .8rem; font-weight: 800; }

/* Papa aa rahe hain (Papa’s coming) */
.ar .room { position: absolute; inset: 0; background: linear-gradient(#f3e5cf 0 78%, #c9a77c 78% 100%); }
.ar .door { position: absolute; left: 6%; bottom: 22%; width: 22%; height: 62%; background: #2a1a10; border-radius: 6px 6px 0 0; overflow: hidden; }
.ar .door img { position: absolute; left: 50%; bottom: 0; width: 120%; transform: translateX(-50%); }
.ar .door-panel { position: absolute; inset: 0; background: linear-gradient(90deg, #a8652e, #8d5023); border: 5px solid #6f3d18; border-radius: 6px 6px 0 0; transform-origin: left center; transition: transform .25s ease-in; }
.ar .door-panel:after { content: ""; position: absolute; right: 12%; top: 52%; width: 18%; height: 4%; min-height: 6px; border-radius: 4px; background: #e8c46a; transform-origin: right center; }
.ar .door.jiggle .door-panel:after { animation: ar-handle .12s infinite alternate; }
@keyframes ar-handle { to { transform: rotate(-24deg); } }
.ar .door.open .door-panel { transform: perspective(600px) rotateY(-75deg); }
.ar .cue { position: absolute; left: 4%; top: 10%; width: 30%; text-align: center; font-weight: 950; font-size: clamp(1rem, 2.4vw, 1.5rem); letter-spacing: -.02em; color: var(--ink); opacity: 0; transition: opacity .15s; }
.ar .cue.on { opacity: 1; animation: ar-cue-beat .35s infinite alternate; }
@keyframes ar-cue-beat { to { transform: scale(1.12); } }
.ar .laptop { position: absolute; right: 6%; bottom: 19%; width: 56%; cursor: pointer; }
.ar .laptop-screen { aspect-ratio: 16 / 10; border: 8px solid #222; border-radius: 12px 12px 0 0; overflow: hidden; position: relative; background: #0f0f0f; }
.ar .laptop-base { height: 14px; margin: 0 -6%; background: linear-gradient(#c9ccd1, #9a9ea5); border-radius: 0 0 14px 14px; }
.ar .tab-yt, .ar .tab-work { position: absolute; inset: 0; display: flex; flex-direction: column; }
.ar .tab-yt { background: #0f0f0f; color: #fff; }
.ar .tab-yt .video { flex: 1; display: grid; place-items: center; background: linear-gradient(135deg, #3b2a5a, #a8323a); }
.ar .tab-yt .video span { width: 56px; height: 40px; border-radius: 10px; background: #f00; display: grid; place-items: center; font-size: 1.1rem; }
.ar .tab-yt .bar { height: 5px; background: #444; } .tab-yt .bar i { display: block; height: 100%; width: 0; background: #f00; }
.ar .tab-yt .title { padding: 6px 10px; font-size: clamp(.62rem, 1.4vw, .84rem); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ar .tab-work { background: #fff; color: #222; padding: 10px 12px; gap: 6px; font-size: clamp(.6rem, 1.3vw, .8rem); }
.ar .tab-work b { font-size: 1.1em; }
.ar .tab-work i { display: block; height: 7px; border-radius: 4px; background: #e3e6ea; }
.ar .laptop[data-tab="yt"] .tab-work, .ar .laptop[data-tab="work"] .tab-yt { display: none; }
.ar .switch { position: absolute; left: 50%; bottom: 3%; transform: translateX(-50%); min-height: 44px; padding: 8px 18px; border: 2px solid var(--ink); border-radius: 12px; background: var(--orange); font-weight: 900; font-size: .9rem; box-shadow: 3px 4px 0 var(--ink); white-space: nowrap; }
.ar .switch:active { transform: translateX(-50%) translateY(2px); box-shadow: 1px 2px 0 var(--ink); }

/* Belt se bacho (Dodge the belt), and the roti game: both draw on a canvas */
.ar .area canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: none; }
.ar .ar-chataak { position: absolute; z-index: 6; left: 50%; top: 42%; transform: translate(-50%, -50%) rotate(-8deg); font-size: clamp(2.2rem, 7vw, 4rem); font-weight: 950; color: var(--orange); -webkit-text-stroke: 2px var(--ink); pointer-events: none; animation: ar-chataak .6s ease-out forwards; }
@keyframes ar-chataak { from { transform: translate(-50%, -50%) rotate(-8deg) scale(.3); opacity: 0; } 30% { transform: translate(-50%, -50%) rotate(-8deg) scale(1.1); opacity: 1; } to { opacity: 0; } }

/* Report card */
.ar .report { width: min(920px, 100%); margin: 56px auto 0; }
.ar .report-card { border: 2px solid var(--ink); border-radius: 18px; background: var(--white); box-shadow: 6px 7px 0 var(--ink); overflow: hidden; }
.ar .report-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 18px 22px; background: var(--ink); color: var(--white); }
.ar .report-head h2 { margin: 0; font-size: 1.4rem; letter-spacing: -.03em; }
.ar .report-head span { font-size: .8rem; color: #b8bdc2; font-weight: 700; }
.ar .report table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.ar .report th, .ar .report td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.ar .report th { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ar .report td:nth-child(2), .ar .report td:nth-child(3) { font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ar .report td:nth-child(4) { color: var(--muted); font-style: italic; }
.ar .report tfoot td { border-bottom: 0; background: var(--paper); font-weight: 900; }
.ar .report .grade { display: inline-block; min-width: 2.2em; text-align: center; padding: 1px 6px; border-radius: 6px; background: var(--paper-dark); }
.ar .report .grade.a { background: #cfe9c8; } .report .grade.f { background: #f6c9b8; }
.ar .report-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 14px 16px; }
.ar .report-foot p { margin: 0; font-size: .9rem; font-weight: 700; }


@media (max-width: 760px) {
  .ar .picker { grid-template-columns: 1fr; gap: 10px; margin-top: 20px; }
  .ar .pick { padding: 10px 14px; }
  .ar .pick-icon { font-size: 1.6rem; }
  .ar .arcade { border-width: 6px; border-radius: 20px; }
  .ar .stage { height: min(74svh, 620px); min-height: 480px; }
  .ar .door { left: 5%; bottom: 54%; width: 28%; height: 36%; }
  /* The result card has to fit, Download button included, without scrolling */
  .ar .overlay { padding: 14px 10px; }
  .ar .card { padding: 14px; }
  .ar .verdict { margin-bottom: 2px; }
  .ar .verdict .face { width: 54px; height: 54px; }
  .ar .verdict b { font-size: .95rem; }
  .ar .card .big { font-size: 2.3rem; margin: 2px 0 0; }
  .ar .card .vs { margin: 4px 0 10px; }
  .ar .card .row { gap: 6px; flex-wrap: nowrap; }
  .ar .card .row .button { flex: 1 1 0; min-height: 40px; padding: 6px 8px; font-size: .78rem; }
  .ar .plug { margin-top: 10px; padding: 10px; }
  .ar .plug p { margin-bottom: 8px; font-size: .8rem; }
  .ar .cue { left: 38%; top: 16%; width: 58%; text-align: left; }
  .ar .laptop { left: 8%; right: 8%; bottom: 17%; width: auto; }
  .ar .report th:nth-child(4), .ar .report td:nth-child(4) { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ar .stage.shake, .ar .cue.on { animation: none; } }