/* شخابيط phone controller — approved Illustrator's Clipboard direction */

:root {
  color-scheme: light;
  --phone-bg: #c89b62;
  --phone-paper: #fffdf6;
  --phone-paper-soft: #f6f0df;
  --phone-ink: #25231f;
  --phone-ink-soft: #645e52;
  --phone-line: #a9d5df;
  --phone-yellow: #f2c84b;
  --phone-cyan: #2bb6a8;
  --phone-coral: #ef6f61;
  --phone-blue: #3975c6;
  --phone-good: #28876f;
  --phone-bad: #c94d43;
  --phone-info: #3975c6;
  --phone-text: var(--phone-ink);
  --phone-text-dim: var(--phone-ink-soft);
  --phone-surface: rgba(255, 253, 246, .92);
  --phone-surface-strong: #efe6d1;
  --me-color: var(--phone-yellow);
  --shadow-raised: 4px 5px 0 rgba(55, 45, 30, .18);
}

html {
  color-scheme: light;
  background: var(--phone-bg);
}

body {
  background-color: var(--phone-bg);
  background-image: url("./assets/phone-sketchbook-background.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-attachment: fixed;
  color: var(--phone-ink);
}

button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline-color: var(--phone-blue);
}

.skip-link {
  border: 2px solid var(--phone-ink);
  border-radius: 6px;
  background: var(--phone-yellow);
  color: var(--phone-ink);
  box-shadow: 2px 3px 0 rgba(37, 35, 31, .28);
}

.game-screen {
  padding-block-start: clamp(52px, 7.5vh, 68px);
  background: transparent;
}

.connection-status {
  border: 2px solid var(--phone-ink);
  border-radius: 999px;
  background: rgba(255, 253, 246, .96);
  box-shadow: 2px 3px 0 rgba(37, 35, 31, .18);
  color: var(--phone-ink-soft);
  backdrop-filter: none;
}

body[data-screen="game"] .connection-status {
  min-height: 30px;
  border-width: 1.5px;
  padding: 4px 8px;
  background: transparent;
  box-shadow: none;
}

.connection-dot {
  background: var(--phone-yellow);
  box-shadow: none;
}

.connection-status[data-state="connected"] .connection-dot,
.connection-status[data-state="resynced"] .connection-dot {
  background: var(--phone-good);
}

.connection-status[data-state="offline"] .connection-dot,
.connection-status[data-state="error"] .connection-dot {
  background: var(--phone-bad);
}

/* Join */
.join-screen {
  justify-content: flex-start;
  padding-block-start: max(88px, calc(68px + env(safe-area-inset-top)));
  padding-inline: max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-left));
}

.join-card {
  width: min(100%, 390px);
  gap: 14px;
  border: 2px solid var(--phone-ink);
  border-radius: 10px 7px 12px 8px;
  padding: clamp(20px, 6vw, 28px);
  background: rgba(255, 253, 246, .9);
  box-shadow: var(--shadow-raised);
}

.logo {
  color: var(--phone-coral);
  font-family: "Noto Kufi Arabic", "Cairo", sans-serif;
  text-shadow: 2px 2px 0 rgba(242, 200, 75, .55);
}

.join-sub,
.field-hint,
.resume-hint {
  color: var(--phone-ink-soft);
}

.field-error,
.join-error {
  color: var(--phone-bad);
}

input[type="text"] {
  border: 2px solid var(--phone-ink);
  border-radius: 7px 5px 8px 6px;
  background: rgba(255, 255, 255, .75);
  color: var(--phone-ink);
  box-shadow: inset 0 -2px 0 rgba(169, 213, 223, .5);
}

input[type="text"]:focus {
  border-color: var(--phone-blue);
  box-shadow: 0 0 0 3px rgba(57, 117, 198, .16);
}

input[aria-invalid="true"] {
  border-color: var(--phone-bad);
}

/* Buttons and icons */
.btn,
.icon-btn,
.tool,
.like-btn,
.status-retry {
  color: var(--phone-ink);
}

.btn {
  border: 2px solid var(--phone-ink);
  border-radius: 8px 6px 9px 7px;
  background: var(--phone-paper);
  box-shadow: 2px 3px 0 rgba(37, 35, 31, .18);
}

.btn:hover:not(:disabled) {
  filter: brightness(.98);
}

.btn-primary {
  background: var(--phone-cyan);
  box-shadow: 3px 4px 0 rgba(37, 35, 31, .24);
  color: #102f2c;
}

.btn-secondary {
  border: 2px solid var(--phone-ink);
  background: var(--phone-paper-soft);
}

.btn-danger {
  border: 2px solid var(--phone-bad);
  background: #fff0ec;
  color: #802e28;
}

.icon-btn {
  border: 1.5px solid var(--phone-ink);
  border-radius: 8px 6px 9px 7px;
  background: rgba(255, 253, 246, .84);
}

.icon-btn .icon,
.tool-icon,
.like-btn-icon {
  filter: brightness(0) saturate(100%);
}

.leave-room-btn {
  border-color: var(--phone-bad);
  background: #fff0ec;
}

.leave-room-btn:hover:not(:disabled) {
  background: #ffe2dc;
}

/* Player header and phase shell */
.player-header {
  position: relative;
  inset-block-start: auto;
  min-height: 62px;
  margin-inline: 14px;
  border: 2px solid var(--phone-ink);
  border-block-end: 3px solid var(--me-color);
  border-radius: 12px 8px 10px 7px;
  padding: 8px 10px;
  background: rgba(255, 253, 246, .9);
  box-shadow: 3px 4px 0 rgba(37, 35, 31, .17);
  backdrop-filter: none;
}

.ph-avatar,
.lp-avatar {
  border-color: var(--phone-ink);
  color: var(--phone-ink);
}

.host-badge {
  color: #876800;
}

.score-label,
.ph-room {
  color: var(--phone-ink-soft);
}

.ph-score {
  color: var(--phone-coral);
}

#phName {
  max-width: 34vw;
}

@media (max-width: 480px) {
  .ph-room {
    display: none;
  }
}

.phase-chrome {
  gap: 6px;
  margin: 10px 16px 0;
  border: 1.5px dashed rgba(37, 35, 31, .55);
  border-radius: 8px 5px 9px 6px;
  padding: 9px 12px;
  background: rgba(255, 253, 246, .74);
}

.phase-instruction {
  color: var(--phone-ink-soft);
}

.phase-meta-item,
.summary-chip {
  border: 1px solid rgba(37, 35, 31, .28);
  background: rgba(255, 253, 246, .72);
  color: var(--phone-ink-soft);
}

.submission-status {
  border: 1.5px solid var(--phone-info);
  border-inline-start: 5px solid var(--phone-info);
  background: #edf6fb;
  color: #224f6f;
}

.submission-status[data-state="pending"] {
  border-color: #ad8420;
  background: #fff8db;
  color: #73570e;
}

.submission-status[data-state="success"] {
  border-color: var(--phone-good);
  background: #e7f7ee;
  color: #1d6655;
}

.submission-status[data-state="retry"],
.submission-status[data-state="error"] {
  border-color: var(--phone-bad);
  background: #fff0ec;
  color: #84322b;
}

.status-retry {
  border: 1.5px solid var(--phone-ink);
  background: var(--phone-paper);
}

.phase-root {
  padding: 14px max(18px, env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
}

.phase-box {
  gap: 12px;
}

.phase-title {
  color: var(--phone-ink);
  font-family: "Noto Kufi Arabic", "Cairo", sans-serif;
}

.phase-sub {
  color: var(--phone-ink-soft);
}

.big-status-icon {
  filter: brightness(0) saturate(100%);
  opacity: .82;
}

/* Lobby and shared paper cards */
.lobby-player,
.disconnected-player {
  border: 1.5px solid rgba(37, 35, 31, .48);
  border-inline-start: 6px solid var(--p-color, #716a5f);
  border-radius: 8px 5px 9px 6px;
  background: rgba(255, 253, 246, .78);
  box-shadow: 2px 2px 0 rgba(37, 35, 31, .1);
}

.summary-chip.ready {
  color: var(--phone-good);
}

.summary-chip.not-ready {
  color: var(--phone-bad);
}

.lp-state {
  color: var(--phone-ink-soft);
}

.lp-host {
  color: #876800;
}

.countdown-note {
  border: 1.5px dashed #ad8420;
  background: #fff8db;
  color: #73570e;
}

/* Drawing — the sheet is the dominant element */
.drawing-box {
  gap: 8px;
}

.drawing-phase-root {
  --drawing-action-space: 66px;
  padding-block-start: 8px;
  padding-block-end: calc(20px + var(--drawing-action-space));
  padding-inline: max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-left));
}

body[data-phase="drawing"] .phase-chrome {
  display: block;
  margin: 0 14px;
  border: 0;
  padding: 0;
  background: transparent;
}

body[data-phase="drawing"] .phase-chrome > div:first-child,
body[data-phase="drawing"] .phase-name,
body[data-phase="drawing"] .phase-instruction,
body[data-phase="drawing"] .phase-meta {
  display: none;
}

body[data-phase="drawing"] .submission-status {
  margin-block-start: 8px;
}

.drawing-head {
  gap: 9px;
}

.prompt-card {
  border: 2px solid var(--phone-ink);
  border-radius: 8px 5px 9px 6px;
  padding: 8px 11px;
  background: #f8d968;
  box-shadow: 2px 3px 0 rgba(37, 35, 31, .15);
}

.prompt-label {
  position: absolute !important;
  overflow: hidden !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
}

.prompt-text {
  color: var(--phone-ink);
}

.canvas-wrap {
  position: relative;
  align-items: center;
  margin-inline: auto;
}

.canvas-actions {
  position: absolute;
  inset-block-start: 9px;
  inset-inline-start: 9px;
  z-index: 3;
  display: flex;
  gap: 7px;
}

.canvas-actions .tool {
  background: rgba(255, 253, 246, .94);
}

.canvas-actions .tool span {
  position: absolute !important;
  overflow: hidden !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
}

#drawCanvas {
  border: 3px solid var(--phone-ink);
  border-radius: 5px 3px 6px 4px;
  background: #fffdf8;
  box-shadow: 4px 5px 0 rgba(37, 35, 31, .22);
}

.tools {
  gap: 7px;
  padding: 3px 0;
}

.tool {
  min-width: 44px;
  min-height: 44px;
  border: 2px solid var(--phone-ink);
  border-radius: 8px 6px 9px 7px;
  background: rgba(255, 253, 246, .92);
  box-shadow: 2px 2px 0 rgba(37, 35, 31, .14);
  color: var(--phone-ink);
}

.tool[aria-pressed="true"] {
  border-color: var(--phone-ink);
  box-shadow: 0 0 0 3px var(--phone-yellow), 2px 3px 0 rgba(37, 35, 31, .18);
}

.color-tool {
  width: 44px;
  padding: 0;
  box-shadow: inset 0 0 0 4px var(--phone-paper), 2px 2px 0 rgba(37, 35, 31, .14);
}

.width-tool {
  width: 44px;
  padding: 0;
}

.width-dot {
  background: var(--phone-ink);
}

.tool-icon {
  width: 19px;
  height: 19px;
}

.draft-note {
  color: var(--phone-good);
}

.drawing-action-row {
  inset-block-end: max(8px, env(safe-area-inset-bottom));
  border: 0;
  border-radius: 0;
  padding: 4px 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.drawing-action-row .btn {
  border-width: 2px;
}

/* Timer, guessing, and voting */
.timer-ring {
  width: 56px;
  height: 56px;
  border: 4px solid var(--phone-coral);
  background: rgba(255, 253, 246, .92);
  box-shadow: 2px 3px 0 rgba(37, 35, 31, .16);
  color: var(--phone-ink);
}

.timer-ring.urgent {
  border-color: var(--phone-bad);
  background: #ffe1da;
}

.choice-btn,
.like-btn {
  border: 1.5px solid var(--phone-ink);
  background: rgba(255, 253, 246, .88);
}

.choice-btn.voted {
  border-color: var(--phone-good);
  background: #e7f7ee;
}

.like-btn[aria-pressed="true"] {
  border-color: var(--phone-coral);
  background: #ffe5df;
  color: #8b382f;
}

.ballot-vote-btn.selected {
  border-color: var(--phone-blue);
  background: #e8f1fb;
  box-shadow: 0 0 0 2px rgba(57, 117, 198, .18);
}

.ballot-like-btn[aria-pressed="true"] .like-btn-icon {
  filter: invert(50%) sepia(72%) saturate(799%) hue-rotate(319deg) brightness(98%) contrast(91%);
}

.ballot-submit {
  box-shadow: 0 -10px 14px rgba(255, 253, 246, .9);
}

/* Score states */
.delta-badge {
  border: 1.5px solid var(--phone-good);
  background: #e7f7ee;
  color: #1d6655;
}

.award-badge {
  border: 1.5px dashed #ad8420;
  background: #fff8db;
  color: #73570e;
}

.final-actions-note {
  border-top-color: rgba(37, 35, 31, .25);
  color: var(--phone-ink-soft);
}

/* Host drawer, pause, and transient feedback */
.drawer-backdrop {
  background: rgba(52, 43, 29, .55);
  backdrop-filter: blur(2px);
}

.host-drawer {
  border-inline-start: 2px solid var(--phone-ink);
  background-color: var(--phone-paper);
  background-image: url("./assets/phone-sketchbook-background.webp");
  background-position: center;
  background-size: cover;
  box-shadow: -7px 0 0 rgba(37, 35, 31, .2);
}

.drawer-kicker {
  color: #876800;
}

.host-section {
  border-top-color: rgba(37, 35, 31, .24);
}

.host-section-title {
  color: var(--phone-ink-soft);
}

.pause-overlay {
  background: rgba(83, 65, 42, .82);
  backdrop-filter: blur(3px);
}

.pause-box {
  border: 2px solid var(--phone-ink);
  border-radius: 10px 7px 12px 8px;
  padding: 18px;
  background: var(--phone-paper);
  box-shadow: 4px 5px 0 rgba(37, 35, 31, .24);
}

.pause-box span {
  color: var(--phone-ink-soft);
}

.toast {
  border: 2px solid var(--phone-ink);
  border-radius: 8px 6px 9px 7px;
  background: var(--phone-paper);
  box-shadow: 3px 4px 0 rgba(37, 35, 31, .23);
}

.toast-error {
  border-color: var(--phone-bad);
  color: #84322b;
}

@media (max-width: 350px) {
  .game-screen {
    padding-block-start: clamp(46px, 7vh, 56px);
  }

  .player-header {
    margin-inline: 9px;
  }

  .phase-chrome {
    margin-inline: 10px;
  }

  .phase-chrome,
  .phase-root {
    padding-inline: 10px;
  }

  body[data-phase="drawing"] .phase-chrome {
    margin-inline: 10px;
  }

  .drawing-phase-root {
    padding-inline: 10px;
  }

  .tools {
    gap: 5px;
  }

  .drawing-action-row {
    padding: 6px 0;
    background: rgba(255, 253, 246, .98);
    box-shadow: 0 -5px 0 rgba(255, 253, 246, .98);
  }
}

@media (max-width: 240px) {
  .game-screen {
    padding-block-start: 40px;
  }

  .player-header {
    margin-inline: 5px;
  }

  .prompt-card {
    padding: 7px 5px;
  }

  .tool {
    padding-inline: 4px;
  }
}

@media (orientation: landscape) and (max-height: 600px) {
  body {
    background-size: cover;
  }

  .game-screen {
    padding-block-start: 10px;
  }

  .player-header {
    min-height: 54px;
  }

  .drawing-box .btn-big {
    grid-column: auto;
  }
}