.starweave-modal[hidden], .starweave-modal [hidden] { display: none !important; }
.starweave-modal { position: fixed; inset: 0; z-index: 12010; overflow: hidden; isolation: isolate; background: #334271; color: #3b3659; font-family: "Nunito", "Trebuchet MS", sans-serif; }
.starweave-open { overflow: hidden; }
.starweave-scene { position: absolute; inset: 0; }
.starweave-scene canvas { display: block; width: 100%; height: 100%; touch-action: none; outline-offset: -5px; }
.starweave-modal button { min-height: 48px; min-width: 48px; padding: 10px 17px; border: 1px solid #e9d9c1; border-radius: 17px; background: #fff8ecf2; color: #443b61; box-shadow: 0 4px 18px #20214b20; cursor: pointer; font: inherit; font-weight: 800; touch-action: manipulation; }
.starweave-modal button:hover { background: #fffefa; }
.starweave-modal button:focus-visible, .starweave-scene canvas:focus-visible { outline: 3px solid #ffe49c; outline-offset: 3px; }
.starweave-modal button:disabled { cursor: default; opacity: .8; }
.starweave-header { position: absolute; top: max(18px, env(safe-area-inset-top)); left: 23px; right: 23px; display: flex; align-items: flex-start; gap: 14px; pointer-events: none; }
.starweave-header > * { pointer-events: auto; }
.starweave-header div { margin-right: auto; padding: 8px 19px 10px; border: 1px solid #fff8e5; border-radius: 21px; background: #fff8eced; box-shadow: 0 5px 30px #24203f20; }
.starweave-header p { margin: 0 0 2px; color: #74678b; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.starweave-header h2 { margin: 0; font: 500 27px/1.2 Georgia, serif; }
.starweave-pad { position: absolute; left: max(22px, env(safe-area-inset-left)); bottom: max(19px, env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(3, 48px); grid-template-rows: repeat(3, 48px); gap: 4px; }
.starweave-pad button { width: 48px; padding: 0; border-radius: 16px; font-size: 25px; touch-action: none; user-select: none; -webkit-user-select: none; }
.starweave-pad button:nth-child(1) { grid-column: 2; grid-row: 1; }
.starweave-pad button:nth-child(2) { grid-column: 1; grid-row: 2; }
.starweave-pad span { grid-column: 2; grid-row: 2; width: 18px; height: 18px; margin: auto; border-radius: 50%; background: #fff8ecb0; }
.starweave-pad button:nth-child(4) { grid-column: 3; grid-row: 2; }
.starweave-pad button:nth-child(5) { grid-column: 2; grid-row: 3; }
.starweave-footer { position: absolute; right: 22px; bottom: max(20px, env(safe-area-inset-bottom)); box-sizing: border-box; width: min(380px, calc(100% - 230px)); padding: 14px 17px 10px; border: 1px solid #fff7e6; border-radius: 24px; background: #fff9edf2; text-align: center; box-shadow: 0 7px 34px #1a1d4930; }
#starweave-hint { margin: 0 0 10px; font-size: 16px; font-weight: 700; line-height: 1.3; }
.starweave-footer [data-starweave-action] { width: 100%; min-height: 53px; background: #f5d6e5; border-color: #dcacc3; font-size: 17px; }
.starweave-controls { margin: 8px 0 0; color: #6c6584; font-size: 12px; }
.starweave-save { margin: 6px 0 0; font-size: 12px; }
.starweave-save:empty { display: none; }
.starweave-loading { position: absolute; top: 47%; left: 50%; transform: translate(-50%, -50%); width: min(300px, calc(100% - 40px)); box-sizing: border-box; padding: 22px; border-radius: 23px; background: #fff7e9; box-shadow: 0 8px 40px #12163d55; text-align: center; font-weight: 800; }
.starweave-ending { position: absolute; left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); transform: translateX(-50%); box-sizing: border-box; width: min(530px, calc(100% - 30px)); padding: 23px 24px 14px; border: 1px solid #fffaf2; border-radius: 29px; background: #fff8eef7; box-shadow: 0 12px 56px #151a4947; text-align: center; }
.starweave-kicker { margin: 0; color: #796485; font-size: 11px; letter-spacing: .13em; text-transform: uppercase; }
.starweave-ending h3 { margin: 7px 0 8px; font: 500 30px/1.15 Georgia, serif; }
.starweave-ending p { margin: 8px 0 14px; }
.starweave-ending div { display: flex; justify-content: center; gap: 8px; }
.starweave-ending div button { background: #e7d5ef; }
.starweave-ending .starweave-together { margin: 16px 0 3px; color: #70677d; font-size: 13px; }
.starweave-ending [data-starweave-replay] { min-height: 40px; padding: 5px 10px; border: 0; background: transparent; box-shadow: none; font-size: 13px; }
.starweave-celebrating .starweave-footer, .starweave-celebrating .starweave-pad { display: none; }
.adventure-starweave-open { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin: 14px 0; padding: 17px 22px; border: 1px solid #d5c4dc; border-radius: 20px; background: linear-gradient(120deg, #fbf3eb, #e7def5); color: #4c3d63; text-align: left; cursor: pointer; font: inherit; }
.adventure-starweave-open strong { display: block; font-size: 18px; }
.adventure-starweave-open small { display: block; margin-top: 4px; font-size: 14px; }
.adventure-starweave-open > span:last-child { flex: none; padding: 10px 16px; border-radius: 20px; background: #fff9f0; font-weight: 800; }
@media (max-width: 700px) {
  .starweave-header { top: max(10px, env(safe-area-inset-top)); left: 10px; right: 10px; align-items: center; gap: 7px; }
  .starweave-header button { padding: 8px 10px; border-radius: 15px; font-size: 13px; }
  .starweave-header div { flex: 1; margin: 0; padding: 10px 6px; border-radius: 17px; text-align: center; }
  .starweave-header p { display: none; }
  .starweave-header h2 { font-size: 18px; }
  .starweave-pad { left: 12px; bottom: 158px; }
  .starweave-footer { right: 12px; bottom: max(10px, env(safe-area-inset-bottom)); width: calc(100% - 24px); padding: 11px 12px 8px; }
  #starweave-hint { margin-bottom: 8px; font-size: 14px; }
  .starweave-footer [data-starweave-action] { font-size: 16px; }
  .starweave-controls { font-size: 11px; }
  .starweave-ending { bottom: max(12px, env(safe-area-inset-bottom)); padding: 17px 14px 9px; }
  .starweave-ending h3 { font-size: 25px; }
  .starweave-ending div button { padding: 8px; font-size: 14px; }
}
@media (max-height: 520px) and (min-width: 701px) {
  .starweave-header { top: 8px; }
  .starweave-header p, .starweave-controls { display: none; }
  .starweave-footer { bottom: 8px; padding: 8px 12px; }
  .starweave-pad { bottom: 8px; }
}