.integral-tetris-app{
  --it-paper:#EEF5F4;
  --it-surface:#FFFFFF;
  --it-ink:#282B2F;
  --it-ink-dynamic:#4A4E52;
  --it-ink-soft:#666B6E;
  --it-hairline:#DCE7E5;
  --it-hairline-strong:#C6D6D3;
  --it-accent:#1F5A52;
  --it-success:#3F8F5C;
  --it-error:#C6533C;
  --it-error-soft:#FFF5F2;
  --it-success-soft:#F1F8F3;
  --it-font-ui:'Nunito',Arial,sans-serif;
  --it-font-content:'Fraunces',Georgia,serif;
  --it-side-pad:6px;

  --it-cell:54px;
  --it-headspace:18px;
  --it-stack-gap:1px;
  --it-glass-pad:2px;
  --it-glass-border:2px;
  --it-glass-w:72px;
  --it-card-w:286px;
  --it-stage-lift:28px;
  --it-right-offset:28px;
  --it-bottom-btn-w:1fr;

  width:100%;
  max-width:430px;
  scroll-margin-top:0;
  margin:0 auto;
  color:var(--it-ink);
  font-family:var(--it-font-ui);
  font-weight:400;
  line-height:1.35;
}
.integral-tetris-app *{box-sizing:border-box}
.integral-tetris-app button,
.integral-tetris-app input,
.integral-tetris-app select{font:inherit}
.integral-tetris-app button{cursor:pointer}
.integral-tetris-app button:disabled{cursor:not-allowed;opacity:.45}
.integral-tetris-app .it-loading{padding:24px var(--it-side-pad);color:var(--it-accent);background:var(--it-paper);font:500 15px/1.4 var(--it-font-ui)}

/* shared mobile frame */
.integral-tetris-app .it-phone{
  position:relative;
  width:100%;
  height:100dvh;
  min-height:560px;
  overflow:hidden;
  background:var(--it-paper);
  box-shadow:0 14px 38px rgba(31,90,82,.12);
}
.integral-tetris-app .it-screen{position:relative;z-index:1;height:100%}
.integral-tetris-app .it-version{
  position:absolute;right:6px;bottom:3px;z-index:4;
  color:var(--it-accent);opacity:.55;font:500 10px/1 var(--it-font-ui)
}

/* start */
.integral-tetris-app .it-start-screen{
  height:100%;
  display:grid;
  grid-template-rows:auto minmax(150px,1fr) auto auto auto;
  gap:7px;
  padding:8px var(--it-side-pad) 18px;
}
.integral-tetris-app .it-start-head{position:relative;text-align:center;padding:3px 46px 0}
.integral-tetris-app .it-start-title{margin:0;color:var(--it-accent);font:500 clamp(24px,7vw,32px)/1.03 var(--it-font-ui)}
.integral-tetris-app .it-start-subtitle{margin-top:5px;color:var(--it-ink-soft);font:400 clamp(13px,3.8vw,16px)/1.2 var(--it-font-ui)}
.integral-tetris-app .it-start-side-icons{position:absolute;right:0;top:0;display:flex;flex-direction:column;gap:7px}
.integral-tetris-app .it-start-circle{
  width:36px;height:36px;border-radius:50%;border:1px solid var(--it-hairline-strong);
  background:rgba(255,255,255,.82);color:var(--it-accent);display:grid;place-items:center;padding:0
}
.integral-tetris-app .it-help-circle{font:500 22px/1 var(--it-font-ui)}
.integral-tetris-app .it-thanks-circle svg{width:25px;height:25px;display:block;fill:none;stroke:currentColor;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.integral-tetris-app .it-start-image-slot{min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.integral-tetris-app .it-quadrants-image{display:block;width:min(100%,390px);max-height:100%;object-fit:contain;border:0;background:transparent;box-shadow:none}
.integral-tetris-app .it-quadrant-reminder{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.integral-tetris-app .it-quadrant-reminder>div{padding:12px 6px;text-align:center;background:rgba(255,255,255,.85);border:.5px solid var(--it-hairline-strong);border-radius:9px;color:var(--it-accent);font:500 14px/1.2 var(--it-font-ui)}
.integral-tetris-app .it-start-form{display:grid;gap:7px}
.integral-tetris-app .it-field-label{display:grid;gap:4px;color:var(--it-accent);font:500 13px/1.1 var(--it-font-ui)}
.integral-tetris-app .it-field{
  width:100%;height:40px;padding:0 12px;border:.5px solid var(--it-hairline-strong);border-radius:9px;
  background:rgba(255,255,255,.88);outline:none;color:var(--it-ink-dynamic);font:500 17px/1 var(--it-font-content)
}
.integral-tetris-app .it-field:focus{border-color:var(--it-accent);box-shadow:0 0 0 2px rgba(31,90,82,.08)}
.integral-tetris-app .it-field.is-invalid{border-color:var(--it-error)}
.integral-tetris-app .it-difficulty-label{margin-bottom:5px;color:var(--it-accent);font:500 13px/1.1 var(--it-font-ui)}
.integral-tetris-app .it-difficulty{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.integral-tetris-app .it-diff{height:42px;border:.5px solid var(--it-hairline-strong);border-radius:9px;background:rgba(255,255,255,.75);color:var(--it-accent);font:500 14px/1.05 var(--it-font-ui)}
.integral-tetris-app .it-diff.is-active{background:var(--it-accent);color:#fff;border-color:var(--it-accent)}
.integral-tetris-app .it-mode-hint{min-height:28px;padding-top:4px;text-align:center;color:var(--it-ink-soft);font:400 12px/1.25 var(--it-font-ui)}
.integral-tetris-app .it-start-button{height:44px;border:1.5px solid var(--it-accent);border-radius:9px;background:rgba(255,255,255,.75);color:var(--it-accent);font:600 16px/1 var(--it-font-ui)}
.integral-tetris-app .it-start-note{text-align:center;color:var(--it-ink-soft);font:400 11.5px/1.2 var(--it-font-ui)}

/* working screen backdrop */
.integral-tetris-app .it-game-phone{background:rgba(238,245,244,.92)}
.integral-tetris-app .it-game-phone::before{
  content:"";position:absolute;inset:-8px;background-image:var(--it-game-bg,none);background-size:cover;background-position:center;
  opacity:.40;filter:blur(.5px) saturate(.82);transform:scale(1.015);z-index:0;pointer-events:none
}
.integral-tetris-app .it-game-phone::after{
  content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(238,245,244,.46),rgba(238,245,244,.60));z-index:0;pointer-events:none
}
.integral-tetris-app .it-game-screen{
  height:100%;
  display:grid;
  grid-template-rows:24px 44px 24px minmax(0,1fr) 114px 20px 40px;
  gap:4px;
  padding:4px var(--it-side-pad) 16px;
}
.integral-tetris-app .it-meta-line{display:flex;align-items:baseline;justify-content:space-between;gap:8px;min-height:24px;padding:0;white-space:nowrap}
.integral-tetris-app .it-meta-group{display:flex;align-items:baseline;gap:5px;min-width:0}
.integral-tetris-app .it-meta-label{color:var(--it-accent);font:500 13px/1 var(--it-font-ui)}
.integral-tetris-app .it-meta-value{color:var(--it-ink-dynamic);font:500 17px/1.1 var(--it-font-content);min-width:0;overflow:hidden;text-overflow:ellipsis}
.integral-tetris-app .it-score-board{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;padding:0 12px;
  border:.5px solid var(--it-hairline-strong);border-radius:9px;background:rgba(255,255,255,.88)
}
.integral-tetris-app .it-score-label{color:var(--it-accent);font:500 15px/1 var(--it-font-ui)}
.integral-tetris-app .it-score-value{color:var(--it-accent);font:500 27px/1 var(--it-font-ui);font-variant-numeric:tabular-nums;justify-self:center}
.integral-tetris-app .it-level-inline{display:flex;align-items:center;gap:4px}
.integral-tetris-app .it-level-label{color:var(--it-ink-soft);font:400 11px/1 var(--it-font-ui)}
.integral-tetris-app .it-level-value{color:var(--it-accent);font:500 15px/1 var(--it-font-ui)}
.integral-tetris-app .it-answer-totals{display:flex;justify-content:center;align-items:center;gap:20px;font:500 13px/1 var(--it-font-ui);font-variant-numeric:tabular-nums}
.integral-tetris-app .it-answer-totals .it-ok{color:var(--it-success)}
.integral-tetris-app .it-answer-totals .it-bad{color:var(--it-error)}

/* glass top aligns with the top of the answer-total row; the card itself remains below it */
.integral-tetris-app .it-stage{
  min-height:0;display:grid;grid-template-columns:var(--it-glass-w) minmax(0,1fr);gap:6px;align-items:start;
  margin-top:calc(-1 * var(--it-stage-lift));
}
.integral-tetris-app .it-well{
  position:relative;width:var(--it-glass-w);
  height:calc(var(--it-headspace) + (var(--it-cell) * 8) + (var(--it-stack-gap) * 7) + (var(--it-glass-pad) * 2) + (var(--it-glass-border) * 2));
  border:var(--it-glass-border) solid var(--it-accent);border-top-color:var(--it-hairline-strong);
  background:rgba(255,255,255,.24);padding:var(--it-glass-pad);overflow:hidden
}
.integral-tetris-app .it-stack{
  position:absolute;left:var(--it-glass-pad);right:var(--it-glass-pad);bottom:var(--it-glass-pad);
  display:flex;flex-direction:column-reverse;align-items:center;gap:var(--it-stack-gap)
}
.integral-tetris-app .it-stack-block{
  width:var(--it-cell);height:var(--it-cell);flex:0 0 var(--it-cell);
  display:grid;place-items:center;border:1px solid rgba(31,90,82,.68);border-radius:2px;
  color:var(--it-accent);font:500 13px/1 var(--it-font-ui);background:rgba(255,255,255,.90)
}
.integral-tetris-app .it-stack-block:nth-child(even){background:rgba(225,239,236,.92)}
.integral-tetris-app .it-falling-cube{
  position:absolute;left:50%;top:var(--it-glass-pad);margin-left:calc(var(--it-cell) / -2);
  width:var(--it-cell);height:var(--it-cell);z-index:3;display:grid;place-items:center;
  background:rgba(255,255,255,.94);border:1px solid rgba(31,90,82,.68);border-radius:2px;
  color:var(--it-accent);font:500 18px/1 var(--it-font-ui);will-change:transform
}
.integral-tetris-app .it-playfield{
  min-width:0;margin-top:var(--it-right-offset);
  height:calc(var(--it-headspace) + (var(--it-cell) * 8) + (var(--it-stack-gap) * 7) + (var(--it-glass-pad) * 2) + (var(--it-glass-border) * 2) - var(--it-right-offset));
  display:grid;grid-template-rows:auto minmax(0,1fr);gap:4px;align-items:start
}
.integral-tetris-app .it-card{
  width:min(100%,var(--it-card-w));aspect-ratio:1/1;height:auto;justify-self:center;
  border:1px solid var(--it-hairline-strong);border-radius:10px;background:rgba(255,255,255,.93);
  padding:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;overflow:hidden
}
.integral-tetris-app .it-card.is-correct{border-color:rgba(63,143,92,.65);background:rgba(241,248,243,.95)}
.integral-tetris-app .it-card.is-wrong{border-color:rgba(198,83,60,.62);background:rgba(255,247,244,.93)}
.integral-tetris-app .it-phenomenon-text{width:100%;max-width:100%;color:var(--it-ink-dynamic);font:500 20px/1.18 var(--it-font-content);text-wrap:balance;white-space:normal;overflow-wrap:normal;word-break:normal;hyphens:none}
.integral-tetris-app .it-answer-state{margin-top:9px;color:var(--it-error);font:500 13px/1.1 var(--it-font-ui)}
.integral-tetris-app .it-card.is-correct .it-answer-state{color:var(--it-success)}
.integral-tetris-app .it-feedback-slot{width:min(100%,var(--it-card-w));height:100%;min-height:0;justify-self:center;overflow:hidden}
.integral-tetris-app .it-feedback-card{
  width:100%;height:100%;min-height:0;border:.5px solid var(--it-hairline-strong);border-radius:9px;
  background:rgba(255,255,255,.92);padding:9px 10px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-start
}
.integral-tetris-app .it-feedback-card.is-hidden{visibility:hidden}
.integral-tetris-app .it-feedback-correct{color:var(--it-accent);font:500 16px/1.18 var(--it-font-ui);margin-bottom:7px}
.integral-tetris-app .it-feedback-protected{margin-bottom:6px;color:var(--it-success);font:500 13px/1.22 var(--it-font-ui)}
.integral-tetris-app .it-feedback-text{color:var(--it-ink-dynamic);font:400 16px/1.24 var(--it-font-ui)}

.integral-tetris-app .it-quadrant-area{position:relative;padding:0}
.integral-tetris-app .it-quadrant-grid{height:100%;position:relative;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:4px}
.integral-tetris-app .it-q-btn{border:.5px solid var(--it-hairline-strong);border-radius:9px;background:rgba(255,255,255,.88);color:var(--it-accent);font:500 14px/1.1 var(--it-font-ui)}
.integral-tetris-app .it-q-btn.is-correct{border-color:var(--it-success);color:var(--it-success)}
.integral-tetris-app .it-q-btn.is-wrong{border-color:var(--it-error);color:var(--it-error)}
.integral-tetris-app .it-quadrant-grid.is-disabled .it-q-btn{pointer-events:none}
.integral-tetris-app .it-emerald-wrap{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:56px;height:56px;z-index:3}
.integral-tetris-app .it-emerald{position:absolute;inset:0;border:0;background:transparent;padding:0}
.integral-tetris-app .it-emerald svg{width:56px;height:56px;display:block;filter:drop-shadow(0 1px 2px rgba(31,90,82,.16))}
.integral-tetris-app .it-emerald.is-active svg{filter:drop-shadow(0 0 6px rgba(46,158,146,.7))}
.integral-tetris-app .it-emerald-count{
  position:absolute;left:50%;bottom:-3px;transform:translate(-50%,50%);width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;background:#163D38;color:#fff;border:2px solid var(--it-paper);font:500 12px/1 var(--it-font-ui)
}
.integral-tetris-app .it-safety-gap{min-height:20px}
.integral-tetris-app .it-bottom-actions{
  padding:0;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:stretch;gap:12px
}
.integral-tetris-app .it-action-wrap{position:relative;min-width:0}
.integral-tetris-app .it-action-wrap-right{margin-left:0}
.integral-tetris-app .it-game-stopwatch{
  min-width:48px;display:flex;align-items:center;justify-content:center;color:var(--it-ink-soft);
  font:500 13px/1 var(--it-font-ui);font-variant-numeric:tabular-nums;letter-spacing:.02em
}
.integral-tetris-app .it-action-btn{
  width:100%;height:100%;border:1.5px solid var(--it-accent);border-radius:8px;background:rgba(255,255,255,.56);
  color:var(--it-accent);font:500 12px/1 var(--it-font-ui)
}
.integral-tetris-app .it-pause-badge{
  position:absolute;left:8px;top:50%;transform:translateY(-50%);width:20px;height:20px;border-radius:50%;
  display:grid;place-items:center;background:#163D38;color:#fff;border:2px solid var(--it-paper);font:500 11px/1 var(--it-font-ui)
}
.integral-tetris-app .it-pause-btn{padding-left:26px}

/* Modals: pause, help, thanks, rest */
.integral-tetris-app .it-modal-host:empty{display:none}
.integral-tetris-app .it-modal-backdrop{
  position:fixed;inset:0;background:rgba(20,36,36,.58);z-index:999999;
  display:flex;align-items:center;justify-content:center;padding:var(--it-side-pad)
}
.integral-tetris-app .it-modal{
  position:relative;width:min(390px,100%);max-height:88dvh;overflow:auto;
  background:var(--it-surface);border:.5px solid var(--it-hairline-strong);border-radius:12px;
  padding:18px;color:var(--it-ink-dynamic);font:400 15px/1.4 var(--it-font-ui);
  box-shadow:0 16px 50px rgba(31,90,82,.18)
}
.integral-tetris-app .it-modal h3{margin:0 0 12px;color:var(--it-accent);font:600 20px/1.2 var(--it-font-ui)}
.integral-tetris-app .it-modal h4{margin:12px 0 5px;color:var(--it-accent);font:500 16px/1.2 var(--it-font-ui)}
.integral-tetris-app .it-modal p{margin:7px 0}
.integral-tetris-app .it-help-section{border-top:.5px solid var(--it-hairline);padding-top:8px;margin-top:9px}
.integral-tetris-app .it-thanks-person{border-top:.5px solid var(--it-hairline);padding-top:8px;margin-top:9px}
.integral-tetris-app .it-thanks-note{margin-top:14px;color:var(--it-ink-soft)}
.integral-tetris-app .it-pause-clock{float:right;color:var(--it-ink-soft);font:400 13px/1.2 var(--it-font-ui)}
.integral-tetris-app .it-modal-actions{margin-top:16px;display:flex;justify-content:flex-end}
.integral-tetris-app .it-modal button,
.integral-tetris-app .it-rest-options button{
  min-height:40px;border:1.5px solid var(--it-accent);border-radius:9px;background:transparent;
  color:var(--it-accent);font:500 14px/1.15 var(--it-font-ui);padding:8px 12px
}
.integral-tetris-app .it-modal .it-primary{background:var(--it-accent);color:#fff}
.integral-tetris-app .it-modal button:disabled{opacity:.42;cursor:not-allowed}
.integral-tetris-app .it-rest-duration{clear:both;padding-top:2px;color:var(--it-accent)}
.integral-tetris-app .it-rest-min-status{color:var(--it-ink-soft)}
.integral-tetris-app .it-secondary{margin-top:6px}
.integral-tetris-app .it-rest-options{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.integral-tetris-app .it-media-slot video,
.integral-tetris-app .it-media-slot audio{display:block;width:100%;max-height:380px;margin-top:14px}

/* Result screen */
.integral-tetris-app .it-shell{width:100%;background:var(--it-paper);min-height:100dvh;padding:var(--it-side-pad)}
.integral-tetris-app .it-panel{position:relative;background:var(--it-surface);border:.5px solid var(--it-hairline-strong);border-radius:12px;padding:18px}
.integral-tetris-app .it-error-panel h2,
.integral-tetris-app .it-results h2{margin:0 0 14px;color:var(--it-accent);font:600 24px/1.2 var(--it-font-ui)}
.integral-tetris-app .it-result-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:16px 0}
.integral-tetris-app .it-result-grid>div{background:var(--it-paper);border:.5px solid var(--it-hairline-strong);border-radius:9px;padding:10px;display:flex;flex-direction:column}
.integral-tetris-app .it-result-grid span{color:var(--it-ink-soft);font:400 12px/1.2 var(--it-font-ui)}
.integral-tetris-app .it-result-grid b{color:var(--it-ink-dynamic);font:500 18px/1.25 var(--it-font-content)}
.integral-tetris-app .it-record-result{color:var(--it-accent);font:500 15px/1.3 var(--it-font-ui);margin:12px 0}
.integral-tetris-app .it-certificate{border:1px solid var(--it-accent);padding:28px 14px;text-align:center;background:var(--it-paper)}
.integral-tetris-app .it-cert-kicker{color:var(--it-accent);font:600 15px/1.2 var(--it-font-ui);letter-spacing:.05em}
.integral-tetris-app .it-cert-name{color:var(--it-ink-dynamic);font:500 30px/1.2 var(--it-font-content);margin:15px 0 7px}
.integral-tetris-app .it-cert-score{color:var(--it-accent);font:500 38px/1.1 var(--it-font-ui);margin-bottom:10px}
.integral-tetris-app .it-cert-record{margin-top:14px;color:var(--it-accent);font:600 15px/1.2 var(--it-font-ui)}
.integral-tetris-app .it-result-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.integral-tetris-app .it-result-actions button{min-height:42px;border:1.5px solid var(--it-accent);border-radius:9px;background:transparent;color:var(--it-accent);font:500 13px/1.15 var(--it-font-ui)}
.integral-tetris-app .it-result-actions .it-primary{grid-column:1/-1;background:var(--it-accent);color:#fff}

@media(max-height:740px){
  .integral-tetris-app{
    --it-cell:50px;--it-headspace:17px;--it-glass-w:68px;--it-card-w:270px;--it-stage-lift:25px;--it-right-offset:25px
  }
  .integral-tetris-app .it-game-screen{grid-template-rows:22px 42px 22px minmax(0,1fr) 104px 20px 36px;gap:3px}
  .integral-tetris-app .it-feedback-correct,.integral-tetris-app .it-feedback-text{font-size:14px}
}
@media(max-height:660px){
  .integral-tetris-app{
    --it-cell:46px;--it-headspace:15px;--it-glass-w:64px;--it-card-w:252px;--it-stage-lift:23px;--it-right-offset:23px
  }
  .integral-tetris-app .it-game-screen{grid-template-rows:22px 40px 20px minmax(0,1fr) 96px 18px 34px}
  .integral-tetris-app .it-score-value{font-size:24px}
  .integral-tetris-app .it-answer-totals{font-size:12px}
  .integral-tetris-app .it-q-btn{font-size:13px}
  .integral-tetris-app .it-meta-value{font-size:16px}
  .integral-tetris-app .it-feedback-correct,.integral-tetris-app .it-feedback-text{font-size:13px}
}
@media(max-width:360px){
  .integral-tetris-app .it-meta-label{font-size:12px}
  .integral-tetris-app .it-meta-value{font-size:15px}
}
@media(min-width:481px){
  .integral-tetris-app .it-phone{border-radius:12px}
}

@media(max-width:350px){.integral-tetris-app .it-rest-options{grid-template-columns:1fr}}

/* ==========================================================================\n   Glass Lagoon UI — v1.4.3-test\n   Applies the accepted thick-glass visual language to every game screen.\n   ========================================================================== */
.integral-tetris-app{
  --it-paper:#DCEFEB;
  --it-surface:rgba(236,249,246,.58);
  --it-ink:#174C48;
  --it-ink-dynamic:#214F4B;
  --it-ink-soft:#52736F;
  --it-hairline:rgba(38,130,121,.22);
  --it-hairline-strong:rgba(20,103,95,.72);
  --it-accent:#1E6862;
  --it-success:#3D8660;
  --it-error:#B95D4D;
  --it-error-soft:rgba(255,239,234,.62);
  --it-success-soft:rgba(233,247,238,.62);
  --it-glass-hi:rgba(255,255,255,.74);
  --it-glass-mid:rgba(232,248,245,.50);
  --it-glass-low:rgba(115,181,173,.24);
  --it-shadow:rgba(18,76,71,.20);
  --it-side-pad:6px;
  --it-cell:46px;
  --it-headspace:16px;
  --it-stack-gap:2px;
  --it-glass-pad:5px;
  --it-glass-border:1px;
  --it-glass-w:65px;
  --it-card-w:260px;
  --it-stage-lift:0px;
  --it-right-offset:0px;
}

/* Shared photographic/illustrative underlay on start, play, results and errors. */
.integral-tetris-app .it-phone,
.integral-tetris-app .it-shell{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:linear-gradient(145deg,#D9EEEB,#B9DBD7 52%,#78B8B0);
  box-shadow:none;
}
.integral-tetris-app .it-phone::before,
.integral-tetris-app .it-shell::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background-image:var(--it-game-bg,var(--it-shared-bg,none));
  background-size:cover;
  background-position:center;
  opacity:.36;
  filter:saturate(.72) contrast(.92);
  transform:scale(1.02);
  pointer-events:none;
}
.integral-tetris-app .it-phone::after,
.integral-tetris-app .it-shell::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(circle at 16% 8%,rgba(255,255,255,.52),transparent 28%),
    radial-gradient(circle at 88% 20%,rgba(255,255,255,.28),transparent 30%),
    linear-gradient(180deg,rgba(224,244,241,.38),rgba(100,171,162,.15));
  pointer-events:none;
}
.integral-tetris-app .it-game-phone::before{inset:0;opacity:.36;filter:saturate(.72) contrast(.92);transform:scale(1.02)}
.integral-tetris-app .it-game-phone::after{background:radial-gradient(circle at 16% 8%,rgba(255,255,255,.52),transparent 28%),radial-gradient(circle at 88% 20%,rgba(255,255,255,.28),transparent 30%),linear-gradient(180deg,rgba(224,244,241,.38),rgba(100,171,162,.15))}

/* Thick cast-glass surface: brighter outer lip + stronger teal inner edge. */
.integral-tetris-app .it-score-board,
.integral-tetris-app .it-card,
.integral-tetris-app .it-feedback-card,
.integral-tetris-app .it-start-circle,
.integral-tetris-app .it-field,
.integral-tetris-app .it-diff,
.integral-tetris-app .it-start-button,
.integral-tetris-app .it-quadrant-reminder>div,
.integral-tetris-app .it-q-btn,
.integral-tetris-app .it-action-btn,
.integral-tetris-app .it-modal,
.integral-tetris-app .it-panel,
.integral-tetris-app .it-result-grid>div,
.integral-tetris-app .it-certificate,
.integral-tetris-app .it-result-actions button,
.integral-tetris-app .it-rest-options button,
.integral-tetris-app .it-modal button{
  border:1px solid rgba(255,255,255,.96);
  background:linear-gradient(180deg,var(--it-glass-hi),var(--it-glass-mid) 47%,var(--it-glass-low));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 -2px 4px rgba(32,122,114,.18),
    inset 2px 0 4px rgba(255,255,255,.44),
    inset -2px 0 4px rgba(23,104,97,.10),
    0 0 0 1.5px rgba(20,103,95,.72),
    0 0 0 3px rgba(255,255,255,.18),
    0 3px 7px var(--it-shadow);
}

/* extra inner rim for container-like surfaces */
.integral-tetris-app .it-card,
.integral-tetris-app .it-feedback-card,
.integral-tetris-app .it-modal,
.integral-tetris-app .it-panel,
.integral-tetris-app .it-certificate{
  position:relative;
  overflow:hidden;
}
.integral-tetris-app .it-card::before,
.integral-tetris-app .it-feedback-card::before,
.integral-tetris-app .it-modal::before,
.integral-tetris-app .it-panel::before,
.integral-tetris-app .it-certificate::before{
  content:"";
  position:absolute;
  inset:3px;
  border-radius:inherit;
  border:1px solid rgba(20,105,97,.38);
  box-shadow:inset 0 0 0 1px rgba(38,130,121,.15),inset 0 7px 9px rgba(255,255,255,.20);
  pointer-events:none;
}
.integral-tetris-app .it-card::after,
.integral-tetris-app .it-feedback-card::after,
.integral-tetris-app .it-modal::after,
.integral-tetris-app .it-panel::after,
.integral-tetris-app .it-certificate::after{
  content:"";
  position:absolute;
  left:8%;right:8%;top:3px;height:3px;
  border-radius:999px;
  background:rgba(255,255,255,.72);
  pointer-events:none;
}

/* Start screen */
.integral-tetris-app .it-start-screen{
  grid-template-rows:auto minmax(150px,1fr) auto auto auto;
  gap:8px;
  padding:8px var(--it-side-pad) 18px;
}
.integral-tetris-app .it-start-title{color:var(--it-accent);text-shadow:0 1px rgba(255,255,255,.72)}
.integral-tetris-app .it-start-subtitle{color:var(--it-ink-soft)}
.integral-tetris-app .it-start-circle{border-radius:50%;color:var(--it-accent)}
.integral-tetris-app .it-field{border-radius:13px;color:var(--it-ink-dynamic);outline:none}
.integral-tetris-app .it-field:focus{border-color:rgba(255,255,255,.98);box-shadow:inset 0 1px 0 #fff,0 0 0 1.5px rgba(20,103,95,.86),0 0 0 3px rgba(255,255,255,.22),0 3px 7px var(--it-shadow)}
.integral-tetris-app .it-field.is-invalid{box-shadow:inset 0 1px 0 #fff,0 0 0 1.5px rgba(185,93,77,.82),0 0 0 3px rgba(255,255,255,.20)}
.integral-tetris-app .it-diff{border-radius:13px;color:var(--it-accent)}
.integral-tetris-app .it-diff.is-active{
  color:#fff;
  background:linear-gradient(180deg,rgba(64,139,132,.90),rgba(24,101,94,.90));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.62),inset 0 -2px 4px rgba(7,68,63,.26),0 0 0 1.5px rgba(17,88,82,.72),0 3px 7px var(--it-shadow);
}
.integral-tetris-app .it-start-button{border-radius:13px;color:var(--it-accent)}
.integral-tetris-app .it-start-button:not(:disabled){font-weight:600}
.integral-tetris-app .it-quadrant-reminder>div{border-radius:15px;color:var(--it-accent)}

/* Working screen — accepted v18 proportions. */
.integral-tetris-app .it-game-screen{
  grid-template-rows:26px 44px 24px minmax(0,1fr) 118px 20px 42px;
  gap:5px;
  padding:6px var(--it-side-pad) 8px;
}
.integral-tetris-app .it-meta-line{padding:0 6px;gap:12px;align-items:center}
.integral-tetris-app .it-meta-label{font-size:12px;font-weight:600;color:#15534E}
.integral-tetris-app .it-meta-value{font-size:16px;color:var(--it-ink)}
.integral-tetris-app .it-score-board{border-radius:13px;padding:0 13px}
.integral-tetris-app .it-score-label{font-size:13px;font-weight:600;color:#15534E}
.integral-tetris-app .it-score-value{font-size:23px;font-weight:600;color:#15534E;text-shadow:0 1px rgba(255,255,255,.75)}
.integral-tetris-app .it-level-label{font-size:11px;color:var(--it-ink-soft)}
.integral-tetris-app .it-level-value{font-size:15px;font-weight:600;color:#15534E}
.integral-tetris-app .it-answer-totals{gap:24px;font-size:12px;font-weight:600}

.integral-tetris-app .it-stage{
  min-height:0;
  display:grid;
  grid-template-columns:65px minmax(0,1fr);
  gap:7px;
  align-items:stretch;
  margin-top:0;
  padding-bottom:10px;
}
.integral-tetris-app .it-well{
  position:relative;
  align-self:start;
  width:65px;
  height:calc(100% - 10px);
  min-height:0;
  border:1px solid rgba(255,255,255,.96);
  border-radius:15px 15px 10px 10px;
  padding:16px 5px 5px;
  overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.68),rgba(232,248,245,.48) 47%,rgba(115,181,173,.24));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.98),inset 0 -2px 4px rgba(32,122,114,.18),inset 2px 0 4px rgba(255,255,255,.44),inset -2px 0 4px rgba(23,104,97,.10),0 0 0 1.5px rgba(20,103,95,.72),0 0 0 3px rgba(255,255,255,.18),0 3px 7px var(--it-shadow);
}
.integral-tetris-app .it-well::before{
  content:"";position:absolute;inset:3px 3px 4px;border-radius:11px 11px 7px 7px;border:1px solid rgba(20,105,97,.38);box-shadow:inset 0 0 0 1px rgba(38,130,121,.15),inset 0 7px 9px rgba(255,255,255,.20);pointer-events:none
}
.integral-tetris-app .it-well::after{
  content:"";position:absolute;left:10%;right:10%;top:3px;height:3px;border-radius:999px;background:rgba(255,255,255,.72);pointer-events:none
}
.integral-tetris-app .it-well.is-full-error{
  border-color:rgba(255,236,232,.98);
  background:linear-gradient(180deg,rgba(255,245,241,.88),rgba(242,179,166,.58) 50%,rgba(185,93,77,.48));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.98),inset 0 -3px 7px rgba(157,62,48,.28),inset 2px 0 4px rgba(255,255,255,.38),0 0 0 1.5px rgba(185,93,77,.92),0 0 0 4px rgba(198,83,60,.20),0 3px 9px rgba(123,49,40,.26);
  animation:it-well-danger-pulse .55s ease-out 1;
}
.integral-tetris-app .it-well.is-full-error::before{border-color:rgba(166,63,50,.55);box-shadow:inset 0 0 0 1px rgba(198,83,60,.20),inset 0 7px 9px rgba(255,255,255,.18)}
@keyframes it-well-danger-pulse{0%{filter:saturate(.75);transform:scale(.992)}45%{filter:saturate(1.22);transform:scale(1.006)}100%{filter:saturate(1);transform:scale(1)}}
.integral-tetris-app .it-stack{left:5px;right:5px;bottom:5px;gap:2px}
.integral-tetris-app .it-stack-block,
.integral-tetris-app .it-falling-cube{
  width:46px;height:46px;flex:0 0 46px;border-radius:4px;
  color:#15534E;font-size:12px;font-weight:600;
  border:1px solid rgba(255,255,255,.82);
  background:linear-gradient(145deg,rgba(255,255,255,.75),rgba(188,227,222,.44));
  box-shadow:inset 0 2px 2px rgba(255,255,255,.95),inset 0 -2px 3px rgba(31,123,115,.19),0 0 0 1px rgba(26,113,105,.43),0 2px 4px rgba(17,74,69,.14);
}
.integral-tetris-app .it-stack-block:nth-child(even){background:linear-gradient(145deg,rgba(244,255,253,.78),rgba(163,211,205,.48))}
.integral-tetris-app .it-falling-cube{left:50%;top:5px;margin-left:-23px;font-size:16px}

.integral-tetris-app .it-playfield{
  min-width:0;
  margin-top:0;
  height:calc(100% - 10px);
  align-self:start;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  gap:7px;
  align-items:start;
}
.integral-tetris-app .it-card{
  width:min(100%,260px);
  max-height:none;
  aspect-ratio:1/1;
  height:auto;
  justify-self:center;
  border-radius:20px;
  padding:18px 16px 15px;
  display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;
}
.integral-tetris-app .it-card.is-correct{background:linear-gradient(180deg,rgba(247,255,250,.76),rgba(219,242,226,.50),rgba(104,170,130,.20));box-shadow:inset 0 1px 0 #fff,inset 0 -2px 4px rgba(61,134,96,.18),0 0 0 1.5px rgba(61,134,96,.72),0 0 0 3px rgba(255,255,255,.18),0 3px 7px var(--it-shadow)}
.integral-tetris-app .it-card.is-wrong{background:linear-gradient(180deg,rgba(255,250,248,.76),rgba(249,230,225,.52),rgba(185,93,77,.16));box-shadow:inset 0 1px 0 #fff,inset 0 -2px 4px rgba(185,93,77,.16),0 0 0 1.5px rgba(185,93,77,.70),0 0 0 3px rgba(255,255,255,.18),0 3px 7px var(--it-shadow)}
.integral-tetris-app .it-phenomenon-text{font-size:18px;line-height:1.24;color:#214F4B;font-weight:500}
.integral-tetris-app .it-answer-state{margin-top:10px;font-size:12px;font-weight:600}
.integral-tetris-app .it-feedback-slot{width:min(100%,260px);height:100%;min-height:0;justify-self:center;overflow:visible}
.integral-tetris-app .it-feedback-card{
  width:100%;height:100%;min-height:0;border-radius:15px;padding:12px 13px;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center
}
.integral-tetris-app .it-feedback-card.is-hidden{visibility:hidden}
.integral-tetris-app .it-feedback-correct{font-size:15px;line-height:1.18;font-weight:600;color:#15534E;margin-bottom:5px}
.integral-tetris-app .it-feedback-protected{font-size:13.5px;line-height:1.22;margin-bottom:5px}
.integral-tetris-app .it-feedback-text{font-size:14.5px;line-height:1.27;color:#335F5A}

.integral-tetris-app .it-quadrant-area{position:relative;padding:0 2px}
.integral-tetris-app .it-quadrant-grid{gap:5px}
.integral-tetris-app .it-q-btn{
  border-radius:15px;color:#15534E;font-size:13px;font-weight:600;
}
.integral-tetris-app .it-q-btn.is-correct{color:#2F7450;box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -2px 4px rgba(61,134,96,.20),0 0 0 1.5px rgba(61,134,96,.72),0 0 0 3px rgba(255,255,255,.16),0 3px 6px rgba(16,73,68,.17)}
.integral-tetris-app .it-q-btn.is-wrong{color:#9D4E43;box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -2px 4px rgba(185,93,77,.18),0 0 0 1.5px rgba(185,93,77,.70),0 0 0 3px rgba(255,255,255,.16),0 3px 6px rgba(16,73,68,.17)}
.integral-tetris-app .it-emerald-wrap{width:58px;height:58px}
.integral-tetris-app .it-emerald svg{width:58px;height:58px;filter:drop-shadow(0 3px 4px rgba(18,80,74,.28))}
.integral-tetris-app .it-emerald-count{border-color:rgba(230,246,243,.96)}
.integral-tetris-app .it-safety-gap{min-height:20px}
.integral-tetris-app .it-bottom-actions{grid-template-columns:1fr 66px 1fr;gap:18px;padding:0 4px}
.integral-tetris-app .it-action-btn{border-radius:13px;font-weight:600;color:#15534E}
.integral-tetris-app .it-game-stopwatch{min-width:66px;color:#15534E;font-size:15px;font-weight:600;text-shadow:0 1px rgba(255,255,255,.7)}
.integral-tetris-app .it-pause-badge{background:#164C47;border-color:rgba(231,247,244,.92)}

/* Pause / rest / help / thanks: same cast-glass object, not a separate visual system. */
.integral-tetris-app .it-modal-backdrop{
  background:rgba(10,63,59,.34);
  backdrop-filter:blur(2px) saturate(.86);
  -webkit-backdrop-filter:blur(2px) saturate(.86);
  padding:var(--it-side-pad);
}
.integral-tetris-app .it-modal{
  width:min(390px,100%);
  max-height:88dvh;
  border-radius:20px;
  padding:20px;
  color:var(--it-ink-dynamic);
}
.integral-tetris-app .it-modal h3{color:#15534E;font-weight:600;text-shadow:0 1px rgba(255,255,255,.70)}
.integral-tetris-app .it-modal h4{color:#15534E;font-weight:600}
.integral-tetris-app .it-help-section,
.integral-tetris-app .it-thanks-person{border-top:1px solid rgba(20,103,95,.24)}
.integral-tetris-app .it-pause-clock{color:var(--it-ink-soft)}
.integral-tetris-app .it-modal button,
.integral-tetris-app .it-rest-options button{border-radius:13px;color:#15534E;font-weight:600}
.integral-tetris-app .it-modal .it-primary,
.integral-tetris-app .it-result-actions .it-primary{
  color:#fff;
  background:linear-gradient(180deg,rgba(64,139,132,.92),rgba(24,101,94,.92));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.60),inset 0 -2px 4px rgba(7,68,63,.26),0 0 0 1.5px rgba(17,88,82,.76),0 0 0 3px rgba(255,255,255,.14),0 3px 7px var(--it-shadow);
}
.integral-tetris-app .it-rest-duration{color:#15534E}
.integral-tetris-app .it-rest-min-status{color:var(--it-ink-soft)}
.integral-tetris-app .it-media-slot video,
.integral-tetris-app .it-media-slot audio{border-radius:14px;box-shadow:0 0 0 1.5px rgba(20,103,95,.58),0 3px 7px var(--it-shadow)}

/* Results, certificate and configuration error */
.integral-tetris-app .it-shell{min-height:100dvh;padding:var(--it-side-pad);display:flex;align-items:flex-start;justify-content:center}
.integral-tetris-app .it-panel{z-index:1;width:100%;max-width:418px;border-radius:20px;padding:18px}
.integral-tetris-app .it-error-panel h2,
.integral-tetris-app .it-results h2{color:#15534E;text-shadow:0 1px rgba(255,255,255,.72)}
.integral-tetris-app .it-result-grid>div{border-radius:13px;padding:10px}
.integral-tetris-app .it-result-grid span{color:var(--it-ink-soft)}
.integral-tetris-app .it-result-grid b{color:var(--it-ink-dynamic)}
.integral-tetris-app .it-record-result{color:#15534E;font-weight:600}
.integral-tetris-app .it-certificate{border-radius:18px;padding:28px 14px;background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(230,247,244,.52),rgba(115,181,173,.20))}
.integral-tetris-app .it-cert-logo{display:block;width:180px;max-width:56%;height:auto;margin:0 auto 18px;position:relative;z-index:1}
.integral-tetris-app .it-cert-kicker,
.integral-tetris-app .it-cert-score,
.integral-tetris-app .it-cert-record{color:#15534E}
.integral-tetris-app .it-result-actions button{border-radius:13px;color:#15534E;font-weight:600}
.integral-tetris-app .it-loading{min-height:100dvh;background:linear-gradient(145deg,#D9EEEB,#B9DBD7 52%,#78B8B0);color:#15534E;padding:24px var(--it-side-pad)}

@media(max-height:740px){
  .integral-tetris-app{--it-cell:43px;--it-glass-w:60px;--it-card-w:246px}
  .integral-tetris-app .it-game-screen{grid-template-rows:24px 42px 22px minmax(0,1fr) 108px 18px 38px;gap:4px}
  .integral-tetris-app .it-stage{grid-template-columns:60px minmax(0,1fr);gap:5px}
  .integral-tetris-app .it-well{width:60px;padding-top:13px}
  .integral-tetris-app .it-stack-block,.integral-tetris-app .it-falling-cube{width:43px;height:43px;flex-basis:43px}
  .integral-tetris-app .it-falling-cube{margin-left:-21.5px}
  .integral-tetris-app .it-card{width:min(100%,246px);padding:15px 14px}
  .integral-tetris-app .it-phenomenon-text{font-size:17px}
  .integral-tetris-app .it-feedback-slot{width:min(100%,246px)}
}
@media(max-height:660px){
  .integral-tetris-app{--it-cell:39px;--it-glass-w:60px;--it-card-w:224px}
  .integral-tetris-app .it-game-screen{grid-template-rows:22px 40px 20px minmax(0,1fr) 98px 16px 36px;gap:3px}
  .integral-tetris-app .it-stage{grid-template-columns:60px minmax(0,1fr);gap:5px}
  .integral-tetris-app .it-well{width:60px;padding-top:13px}
  .integral-tetris-app .it-stack-block,.integral-tetris-app .it-falling-cube{width:39px;height:39px;flex-basis:39px;font-size:11px}
  .integral-tetris-app .it-falling-cube{margin-left:-19.5px}
  .integral-tetris-app .it-card{width:min(100%,224px);border-radius:17px;padding:13px 12px}
  .integral-tetris-app .it-phenomenon-text{font-size:15.5px}
  .integral-tetris-app .it-playfield{gap:5px}
  .integral-tetris-app .it-feedback-slot{width:min(100%,224px)}
  .integral-tetris-app .it-feedback-card{padding:9px 10px}
  .integral-tetris-app .it-feedback-correct,.integral-tetris-app .it-feedback-protected{font-size:13.5px}
  .integral-tetris-app .it-feedback-text{font-size:13.5px;line-height:1.24}
  .integral-tetris-app .it-q-btn{font-size:12px;border-radius:13px}
  .integral-tetris-app .it-bottom-actions{grid-template-columns:1fr 60px 1fr;gap:14px}
  .integral-tetris-app .it-game-stopwatch{min-width:60px;font-size:14px}
}
@media(max-width:360px){
  .integral-tetris-app .it-meta-value{font-size:15px}
  .integral-tetris-app .it-stage{grid-template-columns:58px minmax(0,1fr);gap:5px}
  .integral-tetris-app .it-well{width:58px}
  .integral-tetris-app .it-card,.integral-tetris-app .it-feedback-slot{width:min(100%,216px)}
  .integral-tetris-app .it-phenomenon-text{font-size:15.5px}
  .integral-tetris-app .it-bottom-actions{gap:10px}
}



/* v1.4.2-test — usable rest overlay on short/mobile viewports. */
html.it-modal-document-lock{overscroll-behavior:none}
.integral-tetris-app .it-modal-backdrop{
  overscroll-behavior:contain;
}
.integral-tetris-app .it-modal{
  overflow-y:auto !important;
  overflow-x:hidden !important;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
}
.integral-tetris-app .it-modal-backdrop.is-rest{
  align-items:flex-start;
  justify-content:center;
  padding-top:6px;
  padding-bottom:6px;
  overflow:hidden;
  background:rgba(8,55,51,.56);
  backdrop-filter:blur(3px) saturate(.82);
  -webkit-backdrop-filter:blur(3px) saturate(.82);
  touch-action:none;
}
.integral-tetris-app .it-modal.is-rest{
  max-height:calc(100dvh - 12px);
  background:linear-gradient(180deg,rgba(247,255,253,.94),rgba(220,244,239,.90) 52%,rgba(116,184,175,.78));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -2px 5px rgba(22,111,103,.24),
    0 0 0 1.5px rgba(16,91,84,.82),
    0 0 0 3px rgba(255,255,255,.24),
    0 8px 28px rgba(8,55,51,.34);
  touch-action:pan-y;
}
.integral-tetris-app .it-modal.is-rest .it-media-slot video,
.integral-tetris-app .it-modal.is-rest .it-media-slot audio{
  max-height:42dvh;
}
.integral-tetris-app .it-modal.is-rest .it-modal-actions{
  position:sticky;
  bottom:-1px;
  z-index:8;
  margin:14px -6px -8px;
  padding:10px 6px 8px;
  background:linear-gradient(180deg,rgba(222,244,239,0),rgba(222,244,239,.94) 36%,rgba(213,239,234,.98));
}
.integral-tetris-app .it-modal.is-rest .it-modal-actions .it-primary{
  min-width:160px;
}
@media(max-height:660px){
  .integral-tetris-app .it-modal-backdrop.is-rest{padding-top:3px;padding-bottom:3px}
  .integral-tetris-app .it-modal.is-rest{max-height:calc(100dvh - 6px);padding:14px}
  .integral-tetris-app .it-modal.is-rest .it-media-slot video,
  .integral-tetris-app .it-modal.is-rest .it-media-slot audio{max-height:34dvh}
}


/* Certificate artwork v1.4.3: dynamic data over the hosted WebP underlay. */
.integral-tetris-app .it-cert-art{
  position:relative;
  width:100%;
  aspect-ratio:2/3;
  overflow:hidden;
  border-radius:16px;
  background:linear-gradient(145deg,#D9EEEB,#B9DBD7 52%,#78B8B0);
  box-shadow:0 4px 14px rgba(18,76,71,.20);
  color:#15534E;
}
.integral-tetris-app .it-cert-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.integral-tetris-app .it-cert-award,
.integral-tetris-app .it-cert-player,
.integral-tetris-app .it-cert-reason,
.integral-tetris-app .it-cert-stat,
.integral-tetris-app .it-cert-record-new{position:absolute;z-index:1;text-align:center;left:50%;transform:translateX(-50%);text-shadow:0 1px rgba(255,255,255,.70)}
.integral-tetris-app .it-cert-award{top:21.5%;font:500 clamp(12px,3.2vw,16px)/1.1 var(--it-font-ui);color:#15534E}
.integral-tetris-app .it-cert-player{top:24.2%;width:64%;font:600 clamp(25px,8.2vw,38px)/1 var(--it-font-ui);color:#15534E;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.integral-tetris-app .it-cert-reason{top:29.1%;width:72%;font:500 clamp(10px,2.8vw,14px)/1.2 var(--it-font-ui);color:#174C48}
.integral-tetris-app .it-cert-stat{top:59.3%;width:20%;font:500 clamp(8px,2.15vw,11px)/1.05 var(--it-font-ui);color:#2B6660}
.integral-tetris-app .it-cert-stat b{display:block;margin-top:3px;font:600 clamp(11px,3.05vw,15px)/1.05 var(--it-font-ui);color:#15534E}
.integral-tetris-app .it-cert-stat-difficulty{left:17%}
.integral-tetris-app .it-cert-stat-score{left:39%}
.integral-tetris-app .it-cert-stat-date{left:61.5%}
.integral-tetris-app .it-cert-stat-time{left:83.5%}
.integral-tetris-app .it-cert-record-new{top:67.4%;width:54%;display:flex;align-items:center;justify-content:center;gap:7px;font:600 clamp(12px,3.3vw,17px)/1.1 var(--it-font-ui);color:#15534E;white-space:nowrap}
.integral-tetris-app .it-cert-trophy{font-size:1.35em;line-height:1}


/* ==========================================================================
   v1.5.1-test — real viewport synchronization for WordPress/tablet/desktop.
   ========================================================================== */

.integral-tetris-app{
  --it-viewport-h:100dvh;
  --it-viewport-top:0px;
}

.integral-tetris-app .it-phone{
  height:var(--it-viewport-h);
  min-height:0;
  max-height:var(--it-viewport-h);
}

.integral-tetris-app .it-start-phone{
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

.integral-tetris-app .it-game-phone{overflow:hidden}

.integral-tetris-app .it-shell{
  height:var(--it-viewport-h);
  min-height:0;
  max-height:var(--it-viewport-h);
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

.integral-tetris-app .it-loading{min-height:var(--it-viewport-h)}

.integral-tetris-app .it-modal{
  max-height:min(88dvh, calc(var(--it-viewport-h) - 12px));
}
.integral-tetris-app .it-modal.is-rest{
  max-height:calc(var(--it-viewport-h) - 12px);
}

@media (max-height:900px){
  .integral-tetris-app .it-results{padding:14px}
  .integral-tetris-app .it-results h2{margin-bottom:8px;font-size:21px}
  .integral-tetris-app .it-result-grid{gap:6px;margin:9px 0}
  .integral-tetris-app .it-result-grid>div{padding:7px 9px}
  .integral-tetris-app .it-record-result{margin:8px 0}
  .integral-tetris-app .it-cert-art{width:min(100%,320px);margin-inline:auto}
  .integral-tetris-app .it-result-actions{margin-top:9px}
}

@media (max-height:760px){
  .integral-tetris-app .it-cert-art{width:min(100%,270px)}
  .integral-tetris-app .it-result-grid span{font-size:11px}
  .integral-tetris-app .it-result-grid b{font-size:16px}
  .integral-tetris-app .it-result-actions button{min-height:38px}
}

/* On tablet/desktop, only the result screen becomes wider.
   Start and play keep the accepted 430px composition. */
@media (min-width:700px){
  .integral-tetris-app{max-width:860px}

  .integral-tetris-app .it-phone{
    width:min(430px,100%);
    margin-inline:auto;
  }

  .integral-tetris-app .it-shell{
    width:100%;
    max-width:860px;
    margin-inline:auto;
    padding:10px 12px;
  }

  .integral-tetris-app .it-panel.it-results{
    width:min(100%,820px);
    max-width:820px;
    min-height:0;
    margin:auto;
    padding:16px;
    display:grid;
    grid-template-columns:minmax(220px,280px) minmax(270px,340px);
    grid-template-areas:
      "title certificate"
      "stats certificate"
      "record certificate"
      "actions certificate";
    grid-template-rows:auto auto auto auto;
    justify-content:center;
    align-content:start;
    column-gap:24px;
    row-gap:10px;
  }

  .integral-tetris-app .it-results h2{grid-area:title;margin:0;align-self:end}
  .integral-tetris-app .it-results .it-result-grid{grid-area:stats;margin:0}
  .integral-tetris-app .it-results .it-record-result{grid-area:record;margin:0}
  .integral-tetris-app .it-results > .it-cert-art{
    grid-area:certificate;
    width:min(100%,340px);
    align-self:start;
    justify-self:center;
    margin:0;
  }
  .integral-tetris-app .it-results .it-result-actions{
    grid-area:actions;
    margin:0;
    align-self:start;
  }
  .integral-tetris-app .it-results .it-version{right:8px;bottom:5px}
}

@media (min-width:700px) and (max-height:720px){
  .integral-tetris-app .it-panel.it-results{
    grid-template-columns:minmax(210px,260px) minmax(240px,300px);
    column-gap:18px;
    row-gap:7px;
    padding:12px;
  }
  .integral-tetris-app .it-results > .it-cert-art{width:min(100%,290px)}
  .integral-tetris-app .it-results h2{font-size:20px}
  .integral-tetris-app .it-result-grid{gap:4px}
  .integral-tetris-app .it-result-grid>div{padding:6px 8px}
}


/* v1.5.2-test — tighter vertical fit for tablet / desktop / short screens.
   Goal: always leave room for 8 cubes in the well without pushing quadrant buttons off-screen. */
@media (max-height: 840px) {
  .integral-tetris-app .it-game-screen{
    grid-template-rows:20px 38px 18px minmax(0,1fr) 88px 12px 34px;
    gap:2px;
    padding-top:4px;
    padding-bottom:4px;
  }
  .integral-tetris-app .it-meta-line{padding:0 4px;gap:10px}
  .integral-tetris-app .it-meta-label{font-size:11px}
  .integral-tetris-app .it-meta-value{font-size:14px}
  .integral-tetris-app .it-score-board{padding:0 11px}
  .integral-tetris-app .it-score-label{font-size:12px}
  .integral-tetris-app .it-score-value{font-size:20px}
  .integral-tetris-app .it-level-label{font-size:10px}
  .integral-tetris-app .it-level-value{font-size:13px}
  .integral-tetris-app .it-answer-totals{gap:16px;font-size:11px}
  .integral-tetris-app .it-stage{grid-template-columns:52px minmax(0,1fr);gap:5px;padding-bottom:6px}
  .integral-tetris-app .it-well{width:52px;height:calc(100% - 6px);padding:11px 4px 4px;border-radius:13px 13px 8px 8px}
  .integral-tetris-app .it-well::before{inset:3px;border-radius:9px 9px 6px 6px}
  .integral-tetris-app .it-stack{left:4px;right:4px;bottom:4px;gap:1px}
  .integral-tetris-app .it-stack-block,.integral-tetris-app .it-falling-cube{
    width:36px;height:36px;flex:0 0 36px;border-radius:3px;font-size:10.5px;
  }
  .integral-tetris-app .it-falling-cube{top:4px;margin-left:-18px;font-size:13px}
  .integral-tetris-app .it-playfield{height:calc(100% - 6px);gap:5px}
  .integral-tetris-app .it-card{width:min(100%,204px);padding:12px 12px 11px;border-radius:16px}
  .integral-tetris-app .it-phenomenon-text{font-size:14px;line-height:1.18}
  .integral-tetris-app .it-answer-state{margin-top:7px;font-size:11px}
  .integral-tetris-app .it-feedback-slot{width:min(100%,204px)}
  .integral-tetris-app .it-feedback-card{padding:10px 11px;border-radius:13px}
  .integral-tetris-app .it-feedback-correct{font-size:13.5px;line-height:1.15;margin-bottom:3px}
  .integral-tetris-app .it-feedback-protected{font-size:12.5px;line-height:1.16;margin-bottom:3px}
  .integral-tetris-app .it-feedback-text{font-size:12.5px;line-height:1.18}
  .integral-tetris-app .it-quadrant-area{padding:0 1px}
  .integral-tetris-app .it-quadrant-grid{gap:4px}
  .integral-tetris-app .it-q-btn{font-size:11.5px;border-radius:12px}
  .integral-tetris-app .it-emerald-wrap{width:50px;height:50px}
  .integral-tetris-app .it-emerald svg{width:50px;height:50px}
  .integral-tetris-app .it-safety-gap{min-height:10px}
  .integral-tetris-app .it-bottom-actions{grid-template-columns:1fr 58px 1fr;gap:14px;padding:0 2px}
  .integral-tetris-app .it-action-btn{min-height:34px;border-radius:12px;font-size:12px}
  .integral-tetris-app .it-game-stopwatch{min-width:58px;font-size:13px}
}

@media (max-height: 700px) {
  .integral-tetris-app .it-game-screen{
    grid-template-rows:18px 34px 16px minmax(0,1fr) 82px 10px 30px;
    gap:2px;
    padding-top:3px;
    padding-bottom:3px;
  }
  .integral-tetris-app .it-meta-line{padding:0 3px;gap:8px}
  .integral-tetris-app .it-meta-label{font-size:10px}
  .integral-tetris-app .it-meta-value{font-size:13px}
  .integral-tetris-app .it-score-label{font-size:11px}
  .integral-tetris-app .it-score-value{font-size:18px}
  .integral-tetris-app .it-level-label{font-size:9px}
  .integral-tetris-app .it-level-value{font-size:12px}
  .integral-tetris-app .it-answer-totals{gap:12px;font-size:10px}
  .integral-tetris-app .it-stage{grid-template-columns:48px minmax(0,1fr);gap:4px;padding-bottom:4px}
  .integral-tetris-app .it-well{width:48px;height:calc(100% - 4px);padding:9px 4px 4px}
  .integral-tetris-app .it-stack-block,.integral-tetris-app .it-falling-cube{width:32px;height:32px;flex-basis:32px;font-size:10px}
  .integral-tetris-app .it-falling-cube{margin-left:-16px;font-size:12px}
  .integral-tetris-app .it-card{width:min(100%,184px);padding:10px;border-radius:15px}
  .integral-tetris-app .it-phenomenon-text{font-size:12.5px;line-height:1.16}
  .integral-tetris-app .it-feedback-slot{width:min(100%,184px)}
  .integral-tetris-app .it-feedback-card{padding:8px 9px}
  .integral-tetris-app .it-feedback-correct{font-size:12.5px}
  .integral-tetris-app .it-feedback-protected{font-size:11.5px}
  .integral-tetris-app .it-feedback-text{font-size:11.5px;line-height:1.16}
  .integral-tetris-app .it-q-btn{font-size:10.5px;border-radius:11px}
  .integral-tetris-app .it-emerald-wrap{width:46px;height:46px}
  .integral-tetris-app .it-emerald svg{width:46px;height:46px}
  .integral-tetris-app .it-bottom-actions{grid-template-columns:1fr 52px 1fr;gap:10px}
  .integral-tetris-app .it-action-btn{min-height:30px;font-size:11.5px}
  .integral-tetris-app .it-game-stopwatch{min-width:52px;font-size:12px}
}

/* Tablet/desktop result panel: use more horizontal space, less vertical scrolling. */
@media (min-width: 700px) {
  .integral-tetris-app .it-panel.it-results{
    grid-template-columns:minmax(220px,300px) minmax(290px,380px);
    width:min(100%,900px);
    max-width:900px;
  }
  .integral-tetris-app .it-results > .it-cert-art{width:min(100%,360px)}
}


/* ==========================================================================
   v1.5.3-test — browser zoom fix.

   Root cause:
   desktop browser zoom changes the CSS viewport height. The game width was
   capped at 430px, while its height still followed visualViewport.height.
   At 50% zoom the CSS viewport becomes much taller, so the same 430px-wide
   game became disproportionately tall.

   On tablet/desktop the game is now a fixed-proportion 430 × 720 CSS canvas.
   Browser zoom therefore scales width and height together. If the available
   viewport is shorter than 720px, it still shrinks to the available height.
   ========================================================================== */

@media (min-width:700px){

  .integral-tetris-app{
    --it-desktop-game-w:430px;
    --it-desktop-game-h:720px;
  }

  .integral-tetris-app .it-phone{
    width:min(var(--it-desktop-game-w),100%);
    height:min(var(--it-viewport-h),var(--it-desktop-game-h));
    min-height:0;
    max-height:min(var(--it-viewport-h),var(--it-desktop-game-h));
    margin-inline:auto;
  }

  .integral-tetris-app .it-shell{
    height:min(var(--it-viewport-h),var(--it-desktop-game-h));
    min-height:0;
    max-height:min(var(--it-viewport-h),var(--it-desktop-game-h));
  }

  /* Do not let viewport-height media queries switch the desktop geometry
     when browser zoom changes. Desktop/tablet has one stable geometry. */
  .integral-tetris-app .it-game-screen{
    grid-template-rows:20px 38px 18px minmax(0,1fr) 88px 12px 34px;
    gap:2px;
    padding:4px var(--it-side-pad) 4px;
  }

  .integral-tetris-app .it-meta-line{padding:0 4px;gap:10px}
  .integral-tetris-app .it-meta-label{font-size:11px}
  .integral-tetris-app .it-meta-value{font-size:14px}

  .integral-tetris-app .it-score-board{padding:0 11px}
  .integral-tetris-app .it-score-label{font-size:12px}
  .integral-tetris-app .it-score-value{font-size:20px}
  .integral-tetris-app .it-level-label{font-size:10px}
  .integral-tetris-app .it-level-value{font-size:13px}
  .integral-tetris-app .it-answer-totals{gap:16px;font-size:11px}

  .integral-tetris-app .it-stage{
    grid-template-columns:52px minmax(0,1fr);
    gap:5px;
    padding-bottom:6px;
  }

  .integral-tetris-app .it-well{
    width:52px;
    height:calc(100% - 6px);
    padding:11px 4px 4px;
    border-radius:13px 13px 8px 8px;
  }

  .integral-tetris-app .it-well::before{
    inset:3px;
    border-radius:9px 9px 6px 6px;
  }

  .integral-tetris-app .it-stack{
    left:4px;
    right:4px;
    bottom:4px;
    gap:1px;
  }

  .integral-tetris-app .it-stack-block,
  .integral-tetris-app .it-falling-cube{
    width:36px;
    height:36px;
    flex:0 0 36px;
    border-radius:3px;
    font-size:10.5px;
  }

  .integral-tetris-app .it-falling-cube{
    top:4px;
    margin-left:-18px;
    font-size:13px;
  }

  .integral-tetris-app .it-playfield{
    height:calc(100% - 6px);
    gap:5px;
  }

  .integral-tetris-app .it-card{
    width:min(100%,204px);
    padding:12px 12px 11px;
    border-radius:16px;
  }

  .integral-tetris-app .it-phenomenon-text{
    font-size:14px;
    line-height:1.18;
  }

  .integral-tetris-app .it-answer-state{
    margin-top:7px;
    font-size:11px;
  }

  .integral-tetris-app .it-feedback-slot{
    width:min(100%,204px);
  }

  .integral-tetris-app .it-feedback-card{
    padding:10px 11px;
    border-radius:13px;
  }

  .integral-tetris-app .it-feedback-correct{
    font-size:13.5px;
    line-height:1.15;
    margin-bottom:3px;
  }

  .integral-tetris-app .it-feedback-protected{
    font-size:12.5px;
    line-height:1.16;
    margin-bottom:3px;
  }

  .integral-tetris-app .it-feedback-text{
    font-size:12.5px;
    line-height:1.18;
  }

  .integral-tetris-app .it-quadrant-area{padding:0 1px}
  .integral-tetris-app .it-quadrant-grid{gap:4px}
  .integral-tetris-app .it-q-btn{font-size:11.5px;border-radius:12px}

  .integral-tetris-app .it-emerald-wrap{width:50px;height:50px}
  .integral-tetris-app .it-emerald svg{width:50px;height:50px}

  .integral-tetris-app .it-safety-gap{min-height:10px}

  .integral-tetris-app .it-bottom-actions{
    grid-template-columns:1fr 58px 1fr;
    gap:14px;
    padding:0 2px;
  }

  .integral-tetris-app .it-action-btn{
    min-height:34px;
    border-radius:12px;
    font-size:12px;
  }

  .integral-tetris-app .it-game-stopwatch{
    min-width:58px;
    font-size:13px;
  }

  /* Start/result screens use the same desktop frame height, so browser zoom
     cannot elongate those screens either. */
  .integral-tetris-app .it-start-phone{
    height:min(var(--it-viewport-h),var(--it-desktop-game-h));
    max-height:min(var(--it-viewport-h),var(--it-desktop-game-h));
  }

  .integral-tetris-app .it-panel.it-results{
    max-height:100%;
    overflow-y:auto;
  }
}


/* ==========================================================================
   v1.5.4-test — restore correct well / cube proportions.

   v1.5.2–1.5.3 made the well fill the whole stage height while cube size
   stayed fixed. That left 8 square error cubes occupying only ~50–65% of the
   well. The well height is again derived from eight square cubes + gaps +
   roughly one-third-cube landing space at the top.

   Important: the desktop browser-zoom fix from v1.5.3 remains unchanged.
   ========================================================================== */

.integral-tetris-app{
  --it-fit-cube:46px;
  --it-fit-gap:2px;
  --it-fit-headspace:16px;
  --it-fit-edge:5px;
  --it-fit-well-w:65px;
}

.integral-tetris-app .it-stage{
  align-items:start;
}

.integral-tetris-app .it-well{
  align-self:start;
  width:var(--it-fit-well-w);
  height:calc(
    (var(--it-fit-cube) * 8) +
    (var(--it-fit-gap) * 7) +
    var(--it-fit-headspace) +
    (var(--it-fit-edge) * 2)
  );
  min-height:0;
  max-height:100%;
  padding:0;
}

.integral-tetris-app .it-stack{
  left:var(--it-fit-edge);
  right:var(--it-fit-edge);
  bottom:var(--it-fit-edge);
  gap:var(--it-fit-gap);
}

.integral-tetris-app .it-stack-block,
.integral-tetris-app .it-falling-cube{
  width:var(--it-fit-cube);
  height:var(--it-fit-cube);
  flex:0 0 var(--it-fit-cube);
}

.integral-tetris-app .it-falling-cube{
  left:50%;
  top:var(--it-fit-edge);
  margin-left:calc(var(--it-fit-cube) / -2);
}

/* Normal phone / tall phone. */
@media (max-width:699px){
  .integral-tetris-app{
    --it-fit-cube:43px;
    --it-fit-gap:2px;
    --it-fit-headspace:15px;
    --it-fit-edge:5px;
    --it-fit-well-w:60px;
  }

  .integral-tetris-app .it-stage{
    grid-template-columns:60px minmax(0,1fr);
  }
}

/* Shorter mobile browser viewport. */
@media (max-width:699px) and (max-height:700px){
  .integral-tetris-app{
    --it-fit-cube:39px;
    --it-fit-gap:1px;
    --it-fit-headspace:13px;
    --it-fit-edge:4px;
    --it-fit-well-w:56px;
  }

  .integral-tetris-app .it-stage{
    grid-template-columns:56px minmax(0,1fr);
  }

  .integral-tetris-app .it-stack-block,
  .integral-tetris-app .it-falling-cube{
    font-size:10.5px;
  }
}

/* Tablet / desktop keeps v1.5.3's stable 430×720 design canvas,
   but the well itself is no longer stretched by stage height. */
@media (min-width:700px){
  .integral-tetris-app{
    --it-fit-cube:44px;
    --it-fit-gap:1px;
    --it-fit-headspace:15px;
    --it-fit-edge:4px;
    --it-fit-well-w:60px;
  }

  .integral-tetris-app .it-stage{
    grid-template-columns:60px minmax(0,1fr);
  }

  .integral-tetris-app .it-stack-block,
  .integral-tetris-app .it-falling-cube{
    font-size:11px;
  }

  .integral-tetris-app .it-falling-cube{
    font-size:13px;
  }
}

/* Very short desktop/tablet viewport: shrink the entire square-cube system
   together, rather than stretching the glass. */
@media (min-width:700px) and (max-height:700px){
  .integral-tetris-app{
    --it-fit-cube:40px;
    --it-fit-gap:1px;
    --it-fit-headspace:13px;
    --it-fit-edge:4px;
    --it-fit-well-w:56px;
  }

  .integral-tetris-app .it-stage{
    grid-template-columns:56px minmax(0,1fr);
  }
}


/* ==========================================================================
   v1.5.5-test — restore useful well height, enlarge cubes/cards/explanation,
   and add a real tablet portrait layout.
   ========================================================================== */

/* Base phone: well occupies the full stage again; cubes are ~20% larger
   than in the previous compact version. */
.integral-tetris-app{
  --it-fit-cube:52px;
  --it-fit-gap:2px;
  --it-fit-edge:5px;
  --it-fit-well-w:66px;
}

.integral-tetris-app .it-stage{
  align-items:stretch;
  grid-template-columns:66px minmax(0,1fr);
}

.integral-tetris-app .it-well{
  align-self:stretch;
  width:var(--it-fit-well-w);
  height:calc(100% - 2px);
  max-height:none;
  padding:0;
}

.integral-tetris-app .it-stack{
  left:var(--it-fit-edge);
  right:var(--it-fit-edge);
  bottom:var(--it-fit-edge);
  gap:var(--it-fit-gap);
}

.integral-tetris-app .it-stack-block,
.integral-tetris-app .it-falling-cube{
  width:var(--it-fit-cube);
  height:var(--it-fit-cube);
  flex:0 0 var(--it-fit-cube);
  font-size:12px;
}

.integral-tetris-app .it-falling-cube{
  top:var(--it-fit-edge);
  margin-left:calc(var(--it-fit-cube) / -2);
  font-size:15px;
}

/* Slightly wider square card and explanation card. */
.integral-tetris-app .it-card{
  width:min(100%,286px);
}

.integral-tetris-app .it-feedback-slot{
  width:min(100%,286px);
}

/* Error explanation uses the available space rather than tiny text. */
.integral-tetris-app .it-feedback-card{
  padding:14px 15px;
}

.integral-tetris-app .it-feedback-correct{
  font-size:18px;
  line-height:1.20;
  margin-bottom:8px;
}

.integral-tetris-app .it-feedback-protected{
  font-size:16px;
  line-height:1.24;
  margin-bottom:6px;
}

.integral-tetris-app .it-feedback-text{
  font-size:17px;
  line-height:1.30;
}

/* Small phones: keep the larger readable feedback while fitting the width. */
@media (max-width:360px){
  .integral-tetris-app{
    --it-fit-cube:48px;
    --it-fit-well-w:62px;
  }

  .integral-tetris-app .it-stage{
    grid-template-columns:62px minmax(0,1fr);
  }

  .integral-tetris-app .it-card,
  .integral-tetris-app .it-feedback-slot{
    width:min(100%,258px);
  }

  .integral-tetris-app .it-feedback-correct{font-size:16px}
  .integral-tetris-app .it-feedback-protected{font-size:14.5px}
  .integral-tetris-app .it-feedback-text{font-size:15.5px;line-height:1.26}
}

/* Short phone: scale cubes down together, but do not return to the tiny
   explanation text from 1.5.2. */
@media (max-width:699px) and (max-height:700px){
  .integral-tetris-app{
    --it-fit-cube:46px;
    --it-fit-gap:1px;
    --it-fit-edge:4px;
    --it-fit-well-w:60px;
  }

  .integral-tetris-app .it-stage{
    grid-template-columns:60px minmax(0,1fr);
  }

  .integral-tetris-app .it-card,
  .integral-tetris-app .it-feedback-slot{
    width:min(100%,246px);
  }

  .integral-tetris-app .it-feedback-correct{font-size:15.5px}
  .integral-tetris-app .it-feedback-protected{font-size:14px}
  .integral-tetris-app .it-feedback-text{font-size:15px;line-height:1.24}
}

/* Tablet portrait / touch layout.
   Use much more of the tablet width and height instead of forcing the
   430px desktop canvas on a 768px portrait device. */
@media (min-width:700px) and (pointer:coarse){
  .integral-tetris-app{
    max-width:none;
    --it-tablet-w:560px;
    --it-fit-cube:58px;
    --it-fit-gap:2px;
    --it-fit-edge:6px;
    --it-fit-well-w:76px;
  }

  .integral-tetris-app .it-phone{
    width:min(94vw, var(--it-tablet-w), calc(var(--it-viewport-h) * .63));
    height:auto;
    max-height:none;
    aspect-ratio:430 / 820;
    margin-inline:auto;
  }

  .integral-tetris-app .it-game-screen{
    grid-template-rows:28px 52px 28px minmax(0,1fr) 134px 22px 48px;
    gap:6px;
    padding:8px 8px 10px;
  }

  .integral-tetris-app .it-meta-label{font-size:14px}
  .integral-tetris-app .it-meta-value{font-size:19px}
  .integral-tetris-app .it-score-label{font-size:15px}
  .integral-tetris-app .it-score-value{font-size:28px}
  .integral-tetris-app .it-level-label{font-size:12px}
  .integral-tetris-app .it-level-value{font-size:17px}
  .integral-tetris-app .it-answer-totals{font-size:14px;gap:26px}

  .integral-tetris-app .it-stage{
    grid-template-columns:76px minmax(0,1fr);
    gap:10px;
    padding-bottom:8px;
  }

  .integral-tetris-app .it-well{
    width:76px;
    height:100%;
  }

  .integral-tetris-app .it-stack-block,
  .integral-tetris-app .it-falling-cube{
    width:58px;
    height:58px;
    flex-basis:58px;
    font-size:14px;
  }

  .integral-tetris-app .it-falling-cube{
    margin-left:-29px;
    font-size:18px;
  }

  .integral-tetris-app .it-playfield{
    height:100%;
    gap:10px;
  }

  .integral-tetris-app .it-card{
    width:min(100%,352px);
    padding:22px 20px;
  }

  .integral-tetris-app .it-phenomenon-text{
    font-size:21px;
    line-height:1.23;
  }

  .integral-tetris-app .it-feedback-slot{
    width:min(100%,352px);
  }

  .integral-tetris-app .it-feedback-card{
    padding:18px 20px;
  }

  .integral-tetris-app .it-feedback-correct{
    font-size:21px;
    line-height:1.20;
    margin-bottom:9px;
  }

  .integral-tetris-app .it-feedback-protected{
    font-size:18px;
    line-height:1.25;
  }

  .integral-tetris-app .it-feedback-text{
    font-size:19px;
    line-height:1.30;
  }

  .integral-tetris-app .it-q-btn{
    font-size:15px;
  }

  .integral-tetris-app .it-emerald-wrap{
    width:66px;
    height:66px;
  }

  .integral-tetris-app .it-emerald svg{
    width:66px;
    height:66px;
  }

  .integral-tetris-app .it-bottom-actions{
    grid-template-columns:1fr 80px 1fr;
    gap:24px;
    padding:0 6px;
  }

  .integral-tetris-app .it-action-btn{
    min-height:46px;
    font-size:14px;
  }

  .integral-tetris-app .it-game-stopwatch{
    min-width:80px;
    font-size:16px;
  }
}

/* Desktop / mouse.
   Keep v1.5.3 browser-zoom stability, but restore larger cubes and cards. */
@media (hover:hover) and (pointer:fine){
  .integral-tetris-app{
    --it-desktop-game-w:430px;
    --it-desktop-game-h:760px;
    --it-fit-cube:52px;
    --it-fit-gap:2px;
    --it-fit-edge:5px;
    --it-fit-well-w:66px;
  }

  .integral-tetris-app .it-phone{
    width:min(var(--it-desktop-game-w),100%);
    height:min(var(--it-viewport-h),var(--it-desktop-game-h));
    max-height:min(var(--it-viewport-h),var(--it-desktop-game-h));
    aspect-ratio:auto;
  }

  .integral-tetris-app .it-game-screen{
    grid-template-rows:22px 42px 20px minmax(0,1fr) 98px 14px 36px;
    gap:3px;
    padding:5px 6px 5px;
  }

  .integral-tetris-app .it-stage{
    grid-template-columns:66px minmax(0,1fr);
    gap:6px;
    padding-bottom:5px;
  }

  .integral-tetris-app .it-well{
    width:66px;
    height:100%;
  }

  .integral-tetris-app .it-stack-block,
  .integral-tetris-app .it-falling-cube{
    width:52px;
    height:52px;
    flex-basis:52px;
    font-size:12px;
  }

  .integral-tetris-app .it-falling-cube{
    margin-left:-26px;
    font-size:15px;
  }

  .integral-tetris-app .it-card{
    width:min(100%,278px);
  }

  .integral-tetris-app .it-feedback-slot{
    width:min(100%,278px);
  }

  .integral-tetris-app .it-feedback-correct{
    font-size:17px;
  }

  .integral-tetris-app .it-feedback-protected{
    font-size:15.5px;
  }

  .integral-tetris-app .it-feedback-text{
    font-size:16.5px;
    line-height:1.28;
  }
}


/* ==========================================================================
   v1.5.6-test — measured adaptive layout.

   Static phone/tablet model breakpoints are intentionally overridden below.
   JS measures the actual visual viewport, sticky WordPress header, game frame
   and stage height, then supplies the CSS variables used here.
   ========================================================================== */

.integral-tetris-app{
  max-width:none;
  --it-frame-w:min(430px,100%);
  --it-frame-h:var(--it-viewport-h);
  --it-row-meta:22px;
  --it-row-score:42px;
  --it-row-totals:20px;
  --it-row-quadrants:100px;
  --it-row-safety:14px;
  --it-row-bottom:36px;
  --it-grid-gap-dyn:3px;
  --it-screen-pad-top:5px;
  --it-screen-pad-bottom:6px;
  --it-dyn-cube:52px;
  --it-dyn-cube-gap:2px;
  --it-dyn-edge:5px;
  --it-dyn-well-w:66px;
  --it-dyn-stage-gap:6px;
  --it-dyn-card-w:286px;
  --it-feedback-title-font:18px;
  --it-feedback-body-font:17px;
  --it-phenomenon-max:22px;
  --it-phenomenon-min:12px;
}

.integral-tetris-app .it-phone{
  width:min(var(--it-frame-w),100%);
  height:var(--it-frame-h);
  min-height:0;
  max-height:var(--it-frame-h);
  margin-inline:auto;
  aspect-ratio:auto;
}

.integral-tetris-app .it-game-screen{
  grid-template-rows:
    var(--it-row-meta)
    var(--it-row-score)
    var(--it-row-totals)
    minmax(0,1fr)
    var(--it-row-quadrants)
    var(--it-row-safety)
    var(--it-row-bottom);
  gap:var(--it-grid-gap-dyn);
  padding:
    var(--it-screen-pad-top)
    var(--it-side-pad)
    var(--it-screen-pad-bottom);
}

.integral-tetris-app .it-stage{
  grid-template-columns:var(--it-dyn-well-w) minmax(0,1fr);
  gap:var(--it-dyn-stage-gap);
  align-items:stretch;
  padding-bottom:0;
}

.integral-tetris-app .it-well{
  width:var(--it-dyn-well-w);
  height:100%;
  min-height:0;
  max-height:none;
  align-self:stretch;
  padding:0;
}

.integral-tetris-app .it-stack{
  left:var(--it-dyn-edge);
  right:var(--it-dyn-edge);
  bottom:var(--it-dyn-edge);
  gap:var(--it-dyn-cube-gap);
}

.integral-tetris-app .it-stack-block,
.integral-tetris-app .it-falling-cube{
  width:var(--it-dyn-cube);
  height:var(--it-dyn-cube);
  flex:0 0 var(--it-dyn-cube);
}

.integral-tetris-app .it-falling-cube{
  top:var(--it-dyn-edge);
  margin-left:calc(var(--it-dyn-cube) / -2);
}

.integral-tetris-app .it-playfield{
  height:100%;
  margin-top:0;
  align-self:stretch;
  grid-template-rows:auto minmax(0,1fr);
  gap:var(--it-dyn-stage-gap);
}

.integral-tetris-app .it-card,
.integral-tetris-app .it-feedback-slot{
  width:min(100%,var(--it-dyn-card-w));
}

.integral-tetris-app .it-feedback-card{
  padding:clamp(10px,2.4vw,18px) clamp(11px,2.6vw,20px);
}

.integral-tetris-app .it-feedback-correct{
  font-size:var(--it-feedback-title-font);
  line-height:1.20;
  margin-bottom:clamp(5px,1vw,9px);
}

.integral-tetris-app .it-feedback-protected{
  font-size:calc(var(--it-feedback-body-font) * .92);
  line-height:1.24;
}

.integral-tetris-app .it-feedback-text{
  font-size:var(--it-feedback-body-font);
  line-height:1.28;
}

.integral-tetris-app .it-phenomenon-text{
  line-height:1.20;
}

/* Tablet is determined by measured CSS width / touch behavior in JS. This
   works for a 1200×2000 physical tablet whose browser exposes ~600 CSS px. */
.integral-tetris-app[data-it-layout="tablet"]{
  width:100%;
  max-width:none;
}

.integral-tetris-app[data-it-layout="tablet"] .it-meta-label{font-size:14px}
.integral-tetris-app[data-it-layout="tablet"] .it-meta-value{font-size:18px}
.integral-tetris-app[data-it-layout="tablet"] .it-score-label{font-size:15px}
.integral-tetris-app[data-it-layout="tablet"] .it-score-value{font-size:27px}
.integral-tetris-app[data-it-layout="tablet"] .it-level-label{font-size:12px}
.integral-tetris-app[data-it-layout="tablet"] .it-level-value{font-size:16px}
.integral-tetris-app[data-it-layout="tablet"] .it-answer-totals{font-size:14px}
.integral-tetris-app[data-it-layout="tablet"] .it-q-btn{font-size:15px}
.integral-tetris-app[data-it-layout="tablet"] .it-action-btn{font-size:14px}

/* Desktop keeps the zoom-stable narrow composition but now receives the
   actual available height after all fixed WordPress bars are subtracted. */
.integral-tetris-app[data-it-layout="desktop"]{
  width:100%;
  max-width:none;
}

/* Remove old media-query geometry overrides by repeating the measured rules
   after them with higher source order. */
@media (max-width:699px),
       (min-width:700px),
       (hover:hover) and (pointer:fine),
       (pointer:coarse){
  .integral-tetris-app .it-phone{
    width:min(var(--it-frame-w),100%);
    height:var(--it-frame-h);
    max-height:var(--it-frame-h);
    min-height:0;
    aspect-ratio:auto;
  }

  .integral-tetris-app .it-game-screen{
    grid-template-rows:
      var(--it-row-meta)
      var(--it-row-score)
      var(--it-row-totals)
      minmax(0,1fr)
      var(--it-row-quadrants)
      var(--it-row-safety)
      var(--it-row-bottom);
    gap:var(--it-grid-gap-dyn);
    padding:
      var(--it-screen-pad-top)
      var(--it-side-pad)
      var(--it-screen-pad-bottom);
  }

  .integral-tetris-app .it-stage{
    grid-template-columns:var(--it-dyn-well-w) minmax(0,1fr);
    gap:var(--it-dyn-stage-gap);
  }

  .integral-tetris-app .it-well{
    width:var(--it-dyn-well-w);
    height:100%;
  }

  .integral-tetris-app .it-stack-block,
  .integral-tetris-app .it-falling-cube{
    width:var(--it-dyn-cube);
    height:var(--it-dyn-cube);
    flex-basis:var(--it-dyn-cube);
  }

  .integral-tetris-app .it-falling-cube{
    margin-left:calc(var(--it-dyn-cube) / -2);
  }

  .integral-tetris-app .it-card,
  .integral-tetris-app .it-feedback-slot{
    width:min(100%,var(--it-dyn-card-w));
  }
}


/* ==========================================================================
   v1.5.7-test — fit desktop under stacked site headers, enlarge phone
   explanation typography and scale the start screen to available height.
   ========================================================================== */

.integral-tetris-app{
  --it-start-gap:7px;
  --it-start-pad-top:8px;
  --it-start-pad-bottom:18px;
  --it-start-field-h:40px;
  --it-start-diff-h:42px;
  --it-start-btn-h:44px;
  --it-start-icon-size:36px;
  --it-start-title-size:30px;
  --it-start-subtitle-size:15px;
  --it-start-form-gap:7px;
  --it-start-image-min:130px;
}

.integral-tetris-app .it-start-phone{
  width:min(var(--it-frame-w),100%);
  height:var(--it-frame-h);
  min-height:0;
  max-height:var(--it-frame-h);
  overflow:hidden;
  margin-inline:auto;
}

.integral-tetris-app .it-start-screen{
  height:100%;
  grid-template-rows:auto minmax(var(--it-start-image-min),1fr) auto auto auto;
  gap:var(--it-start-gap);
  padding:
    var(--it-start-pad-top)
    var(--it-side-pad)
    var(--it-start-pad-bottom);
}

.integral-tetris-app .it-start-title{
  font-size:var(--it-start-title-size);
  line-height:1.03;
}

.integral-tetris-app .it-start-subtitle{
  font-size:var(--it-start-subtitle-size);
}

.integral-tetris-app .it-start-circle{
  width:var(--it-start-icon-size);
  height:var(--it-start-icon-size);
}

.integral-tetris-app .it-start-form{
  gap:var(--it-start-form-gap);
}

.integral-tetris-app .it-field{
  height:var(--it-start-field-h);
}

.integral-tetris-app .it-diff{
  height:var(--it-start-diff-h);
}

.integral-tetris-app .it-start-button{
  height:var(--it-start-btn-h);
}

.integral-tetris-app .it-mode-hint{
  min-height:calc(var(--it-start-subtitle-size) * 1.7);
  padding-top:2px;
}

.integral-tetris-app .it-start-note{
  font-size:clamp(10px,calc(var(--it-start-subtitle-size) * .77),12px);
}

/* Phone explanation: deliberately larger than earlier versions. */
.integral-tetris-app[data-it-layout="phone"] .it-feedback-correct{
  font-size:var(--it-feedback-title-font);
  line-height:1.18;
}

.integral-tetris-app[data-it-layout="phone"] .it-feedback-protected{
  font-size:calc(var(--it-feedback-body-font) * .94);
  line-height:1.22;
}

.integral-tetris-app[data-it-layout="phone"] .it-feedback-text{
  font-size:var(--it-feedback-body-font);
  line-height:1.25;
}

/* The measured frame height is authoritative on desktop. Do not let an old
   min-height/max-height rule make it taller than the browser area. */
.integral-tetris-app[data-it-layout="desktop"] .it-phone,
.integral-tetris-app[data-it-layout="desktop"] .it-start-phone{
  height:var(--it-frame-h);
  min-height:0 !important;
  max-height:var(--it-frame-h) !important;
}


/* ==========================================================================
   v1.5.9-test — adaptive explanation typography + hold-to-read.
   ========================================================================== */

.integral-tetris-app .it-feedback-card:not(.is-hidden){
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
  cursor:pointer;
  transition:transform .10s ease, box-shadow .10s ease, filter .10s ease;
}

.integral-tetris-app .it-feedback-card.is-held{
  transform:scale(.994);
  filter:saturate(.88) brightness(.99);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 -2px 5px rgba(26,113,105,.20),
    0 0 0 1.5px rgba(20,103,95,.90),
    0 0 0 4px rgba(31,90,82,.14),
    0 4px 10px rgba(16,73,68,.20);
}

.integral-tetris-app .it-feedback-text{
  overflow-wrap:anywhere;
  hyphens:auto;
}


/* ==========================================================================
   v1.5.10-test — long explanations cannot change game geometry.
   ========================================================================== */

.integral-tetris-app .it-stage{
  min-height:0;
  overflow:hidden;
}

.integral-tetris-app .it-playfield{
  min-height:0;
  overflow:hidden;
}

.integral-tetris-app .it-feedback-slot{
  position:relative;
  height:auto !important;
  min-height:0;
  max-height:100%;
  align-self:stretch;
  overflow:hidden !important;
}

.integral-tetris-app .it-feedback-card{
  position:absolute;
  inset:0;
  width:100%;
  height:100% !important;
  min-width:0;
  min-height:0 !important;
  max-width:100%;
  max-height:100%;
  box-sizing:border-box;
  overflow:hidden !important;
}

.integral-tetris-app .it-feedback-text{
  min-height:0;
  max-width:100%;
  overflow:hidden;
  overflow-wrap:anywhere;
  hyphens:auto;
}

.integral-tetris-app .it-feedback-correct,
.integral-tetris-app .it-feedback-protected{
  flex:0 0 auto;
}